在给元素添加CSS规则（样式）时，发现并没有起到预期效果，主要原因是在某处定义了一个更高权重的规则，导致该处的规则并没有生效。因此，我们需要对CSS权重问题有一定了解。
CSS权重顺序
CSS样式优先级（就近原则）：
内联样式（标签内部）>嵌入样式（<head>中的style里）>外部样式（CSS文件中）
CSS各级别的优先级:
!important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承
!important
CSS2规范中规定：!important 用于单独指定某条样式中的单个属性。对于被指定的属性，有 !important 指定的权重值大于所有未用 !important 指定的规则。
例如:
div{background:blue !important}
div.box{ background:pink}结果效果显示背景颜色为blue
注意：当多条规则中都对同一个属性指定了 !important，!important 的作用相互抵销。
内联
写在标签内部：<标签 style=” ”></标签>
<body>
<div style=”width:200px;height:200px”></div>
</body>ID
<body>
<div id=”box”></div>
</body>
类
<body>
<div class=”box”></div>
</body>标签
div{width:200px}伪类
伪类表示的是一种“状态”，如hover，active等等
常见的伪类选择器：（E代表元素）
E:link E:visited E:hover E:active
E:focus E:not(s) E:first-child E:last-child
E:only-child E:nth-child(n) E:nth-last-child(n) E:first-of-type
E:last-of-type E:only-of-type E:nth-of-type(n) E:nth-last-of-type(n)
E:empty E:checked E:enabled E:disabled
属性选择
E[attr]：选择具有att属性的E元素。
E[att="val"]：选择具有att属性且属性值等于val的E元素。
例子：
<head>
<style>
input[type] { /*拥有type属性的input元素*/
color:red;
}
input[type="text"] { /*type属性值为text的input元素*/
border: 2px solid #000;
}
</style>
</head>
<body>
<input />
<input type="text" />
<input type="submit" />
</body>伪对象（伪元素）
伪元素表示文档的某个确定部分的表现，比如::first-line 伪元素只作用于你前面元素选择器确定的一个元素的第一行。
伪元素选择器只包含以下：
E:first-letter/E::first-letter
E:first-line/E::first-line
E:before/E::before
E:after/E::after
E::placeholder
E::selection
CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法(单冒号:)仍然有效。
通配符
*{} /*选定所有对象。*/继承
当一个元素的某个属性没有被直接指定时，才会继承父级元素的值。
选择器权重值的计算
A：如果规则是写在标签的style属性中（内联样式），则A=1，否则，A=0. 对于内联样式，由于没有选择器，所以B、C、D的值都为0，即A=1, B=0, C=0, D=0（简写为1,0,0,0，下同）。
B：计算该选择器中ID的数量。如果有则B=1，没有B=0（例如，#header 这样的选择器，计算为0, 1, 0, 0）。
C：计算该选择器中伪类及其它属性的数量（包括class、属性选择器等，不包括伪元素）。（例如， .logo[id='site-logo'] 这样的选择器，计算为0, 0, 2, 0）（后面将进一解释为什么会是0,0,2,0）。
D：计算该选择器中伪元素及标签的数量。（例如，p:first-letter 这样的选择器，计算为0, 0, 0, 2）。
从上选择器权重值的计算可以归结为：
1. 一条样式规则的整体权重值包含四个独立的部分：[A, B, C, D];
2. A 表示内联样式，只有 1 或者 0 两个值；
3. B 表示规则中 ID 的数量；
4. C 表示规则中除了 ID、标签和伪元素以外的其它选择器数量；
5. D 表示规则中标签和伪元素的数量；
CSS2规范中给出的一些例子：
1. * {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
2. li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
3. li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
4. ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
5. ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
6. h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
7. ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
8. li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
9. #x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
10. style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
根据这样的定义，所以很多文章简单地把规则归纳为：内联样式的权重值是1000，ID选择器的权重值是100，class选择器的权重值是10，标签选择器的权重值是1. 整条规则中的所有选择器权重值相加得到整个样式规则的权重值，数字越大权重值越高。
大多数情况下，按照这样的理解得出的结论没有问题，但是遇到下面这样的情况就出现问题了：
/* 样式一 */
body header div nav ul li div p a span em {color: red}
/* 样式二 */
.count {color: blue}按照错误的计算方法，样式一的权重值是11，样式二的权重值是10，如果这两条规则用于同一个元素，则该元素应该是红色。实际结果却是蓝色。
原因如下：
根据规范，计算权重值时，A, B, C, D 四组值，从左到右，分组比较，如果 A 相同，比较 B, 如果 B 相同，比较 C, 如果 C 相同，比较 D, 如果 D 相同，也就是权重相同时，后定义的优先。
样式二和样式一的 A、B 相同，而样式二的 C 大于样式一，所以，不管 D 的值如何，样式二权重值都大于样式一，因此实际结果显示为蓝色。
扫一扫
884
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
