选择器优先级
选择器优先级
优先级是分配给 css 声明的一个权重，浏览器应用哪个已定义的样式由这个权重决定。当同一元素被相同权重优先级的选择器选中时，会应用后声明的选择器。一般来说，选择器的优先级如下：
内联>ID选择器>类选择器>标签选择器
优先级是由 (A 、B、C、D )的值来决定的，其中它们的值计算规则如下：
如果存在内联样式，那么 A = 1, 否则 A = 0; B 的值等于 ID选择器 出现的次数; C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数; D 的值等于 标签选择器 和 伪元素 出现的总次数 。
比较规则
从左到右进行比较，数值较大的优先；如果相等，则向右比较下一位，数值较大的优先；如果4位数全部相等，则后声明的优先。
<div id="id" class="class1">
<div class="class2">
<span class="class3">元素</span>
</div>
</div>
span --> (0, 0, 0, 1)
.class3 --> (0, 0, 1, 0)
.class2 .class3 --> (0, 0, 2, 0)
.class1 .class3 --> (0, 0, 2, 0)
#id .class3 --> (0, 1, 1, 0)
#id .class2 span --> (0, 1, 1, 1)
#id .class2 .class3 --> (0, 1, 2, 0)
li /* (0, 0, 0, 1) */
ul li /* (0, 0, 0, 2) */
ul ol+li /* (0, 0, 0, 3) */
ul ol+li /* (0, 0, 0, 3) */
h1 + *[REL=up] /* (0, 0, 1, 1) */
ul ol li.red /* (0, 0, 1, 3) */
li.red.level /* (0, 0, 2, 1) */
a1.a2.a3.a4.a5.a6.a7.a8.a9.a10.a11 /* (0, 0, 11,0) */
#x34y /* (0, 1, 0, 0) */
li:first-child h2 .title /* (0, 0, 2, 2) */
#nav .selected > a:hover /* (0, 1, 2, 1) */
html body #nav .selected > a:hover /* (0, 1, 2, 3) */
假设我们要选择上面的span元素，那么可能有以下这几种方式（优先级从低到高）：
!important 例外规则
当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明。虽然，从技术上讲，!important 与优先级无关，但它与最终的结果直接相关。使用 !important 是一个坏习惯，应该尽量避免.应该使用更具体的规则。在您选择的元素之前，增加一个或多个其他元素，使选择器变得更加具体，并获得更高的优先级。