1. 特殊性
在CSS中针对某个元素的多个相同的规则,浏览器会计算其特殊性。如果一个元素有多个冲突的规则,具有最高特殊性的声明会胜出。
特殊性值表述为4个部分,如:0,0,0,0,具体规则如下
- 对于内联声明(style)的特殊性为1,0,0,0;
- 对于选择器中给定的各个ID属性值,加0,1,0,0;
- 对于选择器中给定的各个类属性值,属性选择或伪类,加0,0,1,0;
- 对于选择器中给定的各个元素和伪元素,加0,0,0,1;
- 通配符(*)的特殊性为0,0,0,0;
- 结合符和继承没有特殊性;
2. 重要性
规则:必须正确地放置!important否则无效。!important 总是放在声名的最后,即分号前面。
h1 {font-style: italic !important; color: gray !important; background: red !important;}
标志为!important的声明并没有特殊的特殊性值,,不过要与非重要声明分开考虑。实际上所有!important的声明会分组在一起,重要声明的特殊性冲突会在重要声明内部解决,而不会与非重要声明相混。类似的所有非重要声明也归为一组,使用特殊性来解决冲突;
重要规则会胜出
h1 {font-style: italic !important; color: gray !important; background: red !important;}
.title {color: black; background: silver;}
* {background: black !important;}
注:非0的数值越靠前,特殊性越高,同一位置的非0的数值,值越大,特殊性越高
注:继承没有特殊性,甚至连0特殊性都没有,而通配符有特殊性,所以通配符的特殊性大于继承
注:内联样式style和!important使用同一属性时,!important 胜出
3. 继承
基于继承机制,样式不仅应用到指定的元素,还会应用到它的后代元素,并且一直延续,一直到没有元素可以继承为止。
- 注意有些属性不能被继承
如属性border(边框)就不会继承。如果边框能继承,文档会变得更混乱。
- 继承的值无特殊性
0特殊性>无特殊性。通配选择器的特殊性就是0,所以通配符选择器>继承。
<p>结构和层叠<em>继承与通配符的重要关系</em></p>
p {color: gray;}
* {color: red}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HCtMqTUU-1607654108778)(C:\Users\63291\AppData\Roaming\Typora\typora-user-images\image-20201104091133897.png)]
4. 层叠
4.1 层叠的规则
- 找出所有相关的规则,这些规则都包含一个给定元素匹配的选择器。
- 按照重要性对规则分组排序。标志!important规则的权重高于没有!important标志的规则。按来源对应用到给定元素的所有声明排序。共有3种来源:创作人员,读者,用户代理。
- 正常情况下,创作人员的样式要胜于读者的样式表
- 有!important标志的读者样式要强于所有其他样式,这包括有!important标志的创作人员样式。
- 创作人员样式和读者样式都比用户代理的默认样式要强。
- 按特殊性对应用到给定元素的所有声明排序。有较高特殊性的元素权重重要大于较低特殊性的元素。
- 按出现顺序对应用到给定元素的所有声明排序。一个声明在样式表或文档中越后出现,它的权重就越大。如果样式表中有导入样式表的话,一般认为出现在导入样式表中的声明在前,主样式表中的所有声明在后。
4.2 按权重和来源排序
-
若两个样式规则应用到同一个元素,而且其中一个规则有!important标志,这个重要规则将胜出。
-
在声明权重方面要考虑5级,权重由大到小的顺序依次为:
- 读者的重要声明
- 创作人员的重要声明
- 创作人员的正常声明
- 读者的正常声明
- 用户代理声明
4.3 按特殊性排序
若向一个元素应用多个彼此冲突的声明,而且它们的权重相同,则要按特殊性排序,最特殊的声明最优先。
4.4 按顺序排序
若两个规则的权重,来源和特殊性完全相同,那么在样式表中后出现的一个会胜出。
特别地,认为元素style属性中指定我样式位于文档样式表的最后,即放在所有其他规则的后面。
正是由于这种按顺序排序,所以才有了通常推荐的链接样式顺序:link-visited-focus-hover-active(LVFHA)。
:link {color: blue;}
:visited {color: purple;}
:focus {color: green;}
:hover {color: red;}
:active {color: orange;}
这五个选择器的特殊性都是一样的:0,0,1,0。因为它们有相同的权重,来源,特殊性,故与元素匹配的最后一个选择器才会胜出。
4.5 非CSS表现提示
文档有可能包含非CSS的表现提示,例如font元素。非CSS提示被处理为特殊性为0,并出现在创作人员样式表的最前面。只要有创作人员或读者样式,这种表现提示就会被覆盖,但用户代理的样式不能将其覆盖。