HTML+CSS3（八）——CSS权重_专业问答

目录： HTML+CSS3（一）——认识浏览器 HTML+CSS3（二）——HTML 初识 HTML+CSS3（三）——HTML基本标签 HTML+CSS3（四）——表单pattern正则属性 HTML+CSS3（五）——CSS基础 HTML+CSS3（六）——行内元素和块级元素 HTML+CSS3（七）——display属性（前面文章已讲过，这里转载一篇） HTML+CSS3（八）——CSS权重 HTML+CSS3（九）——CSS高级技巧 HTML+CSS3（十）——CSS3新特性之过渡 HTML+CSS3（十）——CSS3新特性之2D变形和3D变形 HTML+CSS3（十）——CSS3新特性之动画 HTML+CSS3（十一）——案例 HTML+CSS3（十二）——CSS常见问题

在给元素添加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=” ”></标签>

类

标签

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 的值如何，样式二权重值都大于样式一，因此实际结果显示为蓝色。

80185671

HTML+CSS3（八）——CSS权重

推荐资讯

推荐站点