CSS选择器中的权限问题

在开发中我们经常发现用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标签起作用。

在开发中一定要注意这种特殊情况