正文
css样式层级问题,样式层级关系
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
CSS样式优先级问题（如能正确回答，有积分奖励）
设带“#”的id选择符权重为100，带“.”的类选择符权重为10，不带什么“”的选择符权重为1,；则由上至下的代码，后边写的样式权重大于等于前面写的样式时，会覆盖前面的样式。
然后按楼主的要求来分析，一共是三个样式：
#div1 td{ color:#FF0000}
#div1 .blue{color:#0000FF}
.bluecolor:#0000FF}
第一个权重为一个“#”加“” = 100+1 = 101
第二个权重为一个“#”加“.” = 100+10=110
第三个权重为一个“.”=10
则，很明显，当一二组合时，第二个可以覆盖掉第一个的样式；当一三组合时，第三个不能覆盖掉第一个样式，则两个同为红色。
如不明，再发问...
相关问答
Q1: css父级的层级不对会导致deep失效吗？
会啊，层级对于css样式来说是很重要的。层级直接决定了，样式是否生效。
Q2: 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
Q3: 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文件，查看实现的层级效果。
Q4: 网页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的值决定谁在最上层！
