在开发中我们经常发现用CSS选择器来选择HTML标签的时候,没有效果。造成这方面的原因就是选择器的权限。
1.选择器的权限
行内式 > id选择器 > 类选择器 > 标签选择器
2.CSS选择器的权重值
可以通过上面的两种方法中很容易判断出CSS选择器的权限大小,对这些还有不明白的可以问度娘。
下面介绍里面的一种特殊情况,那就是“就近原则”。
<ul class="box">
<li>我是第一个</li>
<li>我是第二个</li>
<li>我是第三个</li>
</ul>
想跟上面的一段代码里的字添加颜色,我们有两种方法可行。
第一种:
.box {
color: red;
}
第二种:
li {
color: lawngreen;
}
从结果可以看出来,上面的两种方式都能够将文字的颜色改变。
但是如果我们将两种情况的代码都放进来,看看是哪个方法起作用:
.box {
color: red;
}
li {
color: lawngreen;
}
结果显示:是第二种起作用了。
但是从上面的权重来看就有误了,因为类选择器的权重是大于标签选择器的。
这里就设计到一个“就近原则”的问题。
因为.box对应着是ul标签,li标签更接近于文字,所以li标签起作用。
在开发中一定要注意这种特殊情况