选择器优先级的一些问题
#Box div{
color:red;
}
.important_false{
color:blue;
}
.important_true{
color:blue !important;
}
<div id="Box">
<div class="important_false">这一行末使用important</div>
<div class="important_true">这一行使用了important</div>
</div>
这种情况下,显示为
去掉#Box中的div,显示为
首先CSS的优先级顺序: tag中的style > id > class > tag > 继承的属性 按同样的顺序
#Box div 情况下:id+tag>class所以显示红色
#Box 情况下: 则按照越靠近优先级越高原则 ,所以显示蓝色
当父元素和子元素设置相同的样式时,继承的 权重很小,有的浏览器认为他是0.1,所以不加div显示蓝色,加上div时,显示红色。
另一测试代码
<style type="text/css">
<!–
#div1 ul li{ list-style: square;}
.div2class ul li{ list-style:none;}
–>
</style>
<div id="div1" class="div1class">
<div id="div2" class="div2class">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
上面代码本意是通过想通过div2class来去掉li前面定义的点, 按照越靠近优先级越高原则, 应该是应用 .div2class 中的定义, 但实际情况方点并没有去掉. 并没有应用 .div2class 还是按照 #div1 中的设置显示. 这证明 id 的优先级要高于 class.
总结一点经验就是: 通过继承来的属性 id 的优先级高于 class
CSS的优先级顺序: tag中的style > id > class > tag > 继承的属性 按同样的顺序