不管怎样,无论问题看上去多抽象,多难懂,都要继续努力!你的努力不会白费。
继承 是从一个元素向其后代元素传递属性值所采用的机制。
1. 特殊性
如果遇到下面这种 css :
h2.grape { color : pink; }
h2 { color: silver }
这两种规则都指向一个元素,您觉得哪种规则会胜出?
当然是第一种,即 h2.grape ,为什么呢?
因为每个选择器的特殊性。浏览器会根据不同规则计算出其特殊性,特殊性最高的规则将会胜出。
那么,这种特殊性怎么计算呢??
选择器的特殊性,是由选择器本身的组件确定。特殊性表述为4个部分,即:0,0,0,0
具体的特殊属性如下:
(1) 对于选择器中给定的各个 ID 属性值, 加 0,1,0,0;
(2) 对于选择器中给定的各个类属性值、属性选择或伪类,加0,0,1,0;
(3) 对于选择器中给定的各个元素和伪元素,加0,0,0,1;
(4) 结合符和通配选择器对特殊性没有任何贡献。
例如:
h1 { color: pink;} 其特殊性为:0,0,0,1;
body h1{ 0,0,0,2 }
再结合文章最前面那个例子,为啥h2.grape会胜出h2呢?
h2.grape 的特殊性为: { 0,0,1,1 }
h2的特殊性为:{ 0,0,0,1 }
所以 h2.grape 会胜出。
注意,上面的特殊性值是从左向右排列的。所以,特殊性值 1,0,0,0 大于以0开头的所有特殊值,而不论后面的数是啥。
所以,0,1,0,1 比 0,0,1,7 高。
2. 声明和特殊性
3. 通配选择器的特殊性
通配选择器对一个选择器的特殊性没有贡献。
同样,前面所展示那样,div>p, h2 + p, * 中的>、+、* 对于提高特殊性没有帮助。
4. ID和属性选择器的特殊性
html > body table tr[id="totals"] td ul > li { color: maroon }; // 0,0,1,7
li#answer { color: navy } //0,1,0,1
可以看出, li#answer 的特殊性更高,会胜出。
5. 内联样式特殊性
可能,通过上面你会发现,为什么一直都是 0,0,1,7 或者 0,1,0,1 ??
为什么第一位数一直是0??
答案是:
因为第一个 0 是为内联样式声明保留的,它比其他所有声明的特殊性都高。
比如:
h1#meadow { color:red }. // 0,1,0,1
the meadow party
// 1, 0 ,0 ,0
所以,会应用内联中的样式。
6. 重要性
有时候,某个声明可能非常重要,超过了所有其他声明,则可以使用 !important
Snapshots
h2{
color: pink !important;
}
pink 将会胜出
.pink{
color: pink !important;
}
#aaa{
color: #fff !important;
}
fff 会胜出
7. 继承
基于继承机制,样式不仅应用到指定的元素,还会应用到它的后代元素。
继承的值没有特殊性。
8. 层叠
我们来思考一个问题:如果特殊性相等的两个规则同时应用到同一个元素会怎么样呢??浏览器如何解决这个冲突?
答案:按出现顺序对应用到给定元素的所有声明排序。一个声明在样式表或文档中越后出现,它的权重就会越大。
比如:
h1{ color: red;}
h1{ color: pink;}
由于pink后出现,它的权重高,所以它会胜出。
(1) 按权重和来源排序
权重由大到小顺序依次是:
- 读者的重要声明
- 创作人员的重要声明
- 创作人员的正常声明
- 读者的正常声明
- 用户代理声明
(2) 按特殊性排序
p#bright { color:red; } // 0,1,0,1
p{ color: yellow;} //0,0,0,1
所以 red 胜出
(3) 按顺序排列
如果两个规则的权重、来源和特殊性完全相同,那么,在样式表中后出现的一个将会胜出。
LVHA:
:link { color: blue;}
:visited { color: purple;}
:hover { color: red;}
:active { color: orange;}