css样式层级问题,样式层级关系

CSS样式优先级问题（如能正确回答，有积分奖励）

设带“#”的id选择符权重为100，带“.”的类选择符权重为10，不带什么“”的选择符权重为1,；则由上至下的代码，后边写的样式权重大于等于前面写的样式时，会覆盖前面的样式。

创新互联是专业的宜黄网站建设公司，宜黄接单;提供成都网站设计、成都做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行宜黄网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

然后按楼主的要求来分析，一共是三个样式：

#div1 td{ color:#FF0000}

#div1 .blue{color:#0000FF}

.bluecolor:#0000FF}

第一个权重为一个“#”加“” = 100+1 = 101

第二个权重为一个“#”加“.” = 100+10=110

第三个权重为一个“.”=10

则，很明显，当一二组合时，第二个可以覆盖掉第一个的样式；当一三组合时，第三个不能覆盖掉第一个样式，则两个同为红色。

如不明，再发问...

css父级的层级不对会导致deep失效吗？

会啊，层级对于css样式来说是很重要的。层级直接决定了，样式是否生效。

CSS关于层级关系的问题。。。

div class="banner"

object type="application/x-shockwave-flash" data="flash/930100.swf" width="930" height="100"

param name="allowscriptaccess" value="always"

!-- 解决 IE 6 7 8 层叠问题 --

param name="wmode" value="transparent"

param name="movie" value="flash/930100.swf" width="930" height="100"

embed src="flash/930100.swf" width="930" height="100" border="0" align="center" allowscriptaccess="always" wmode="transparent"

/object

/div

css样式如何控制div到最顶层

1、新建一个html文件，命名为test.html

2、在test.html文件内，使用css设置页面所有的div宽度为300px，高度为300px，div的位置为绝对定位。

3、在test.html文件内，创建三个div，并用文字标识，分别为底层div、中层div、最顶层div。

4、在test.html文件内，分别给三个div设置class属性为one、two、three，用于下面对类名进行样式设置。

5、在css标签内，设置类名为one的div样式，设置其背景颜色为红色，距离页面左边缘为0，距离页面上边缘为0，同时使用z-index设置其层级为1。

6、在css标签内，设置类名为two的div样式，设置其背景颜色为黄色，距离页面左边缘为50px，距离页面上边缘为50px，同时使用z-index设置其层级为2，即在类名为one的div的上面。

7、在css标签内，设置类名为three的div样式，设置其背景颜色为粉红色，距离页面左边缘为100px，距离页面上边缘为100px，同时使用z-index设置其层级为3，即在页面三个div中的最顶层。

8、在浏览器打开test.html文件，查看实现的层级效果。

网页CSS元素浮动的层次顺序问题。

层级关系的布局有两种解决方法：

一种方法是使用标签的自然顺序和嵌套顺序来形成合理的布局。

而第一种方法却不是万能的，有时候我们需要将原本位于下层的元素移到另一个元素上方，那可以使用z-index；

当你定义的CSS中有position属性值为absolute、relative或fixed，

用z-index此取值方可生效。

此属性参数值越大，则被层叠在最上面。

例子：

html

head

style

.z1,.z2,.z3{position:absolute;width:200px;height:100px;padding:5px 10px;color:#fff;text-align:right;}

.z1{z-index:1;background:#000;}

.z2{z-index:2;top:30px;left:30px;background:#C00;}

.z3{z-index:3;top:60px;left:60px;background:#999;}

/style

/head

body

div class="z1"z-index:1/div

div class="z2"z-index:2/div

div class="z3"z-index:3/div

/body

/html

上面三个CSS，将根据z-index的值决定谁在最上层！