特殊性值

CSS 可以对一个元素使用两个或多个规则, 每个规则都有自己的选择器. 例如:

h1 { color: red; }
body h1 { color: green; }

h1 对应着两个规则， 但是只有一个规则生效， 通过 css 特殊性值来计算

选择器	特殊性值
包含ID	0, 1, 0, 0
包含类,属性, 伪类	0, 0, 1, 0
包含元素和为元素	0, 0, 0, 1
内联样式	1, 0, 0, 0

上一个规则的特殊性值为

h1 { color: red; } /* 0, 0, 0, 1*/
body h1 { color: green; } /* 0, 0, 0, 2*/

所以h1的字体颜色显示为绿色

继承

如果没有对元素指定规则， 元素会继承至父元素的规则

h1 { color: blue; }

<h1>Hello <em>World</em></h1>

我们对h1设置了颜色为蓝的规则后， em元素的字体也变成了蓝色

继承和特殊性优先级

继承来的元素是没有特殊性的，所以优先级低于设置特殊性值的元素(即使特殊性值为0)

层叠

当元素具有多个相同特殊性值的规则时， 后设置的规则会覆盖之前的规则

h1 { color: red; }
h1 { color: blue; }

h1 显示颜色为蓝

重要声明

当设置important声明时， 规则的权重是最高的

h1 { color: red !important; }