选择器的特殊性:特殊性的值表示为四个部分 ,比如 0 0 0 0
对于选择器中给定的各个ID属性值,加0 1 0 0
对于选择器中给定的各个类属性值,属性选择或伪类加 0 0 1 0
对于选择器中给定的各个元素和伪元素,加- 0 0 0 1 伪元素有特殊性,其特殊性为0 0 0 1
结合符合通配选择器对特殊性没有任何贡献
内联样式的特殊性为 1 0 0 0
特殊性自左到右逐个比较 1 0 0 0 大于 0 * * * 0 0 1 0 大于 0 0 0 13
重要声明
在属性值结束分号前!important 标志 ,该标志必须放在声明的最后,每个声明都需要加!important才能生效
特殊性:重要声明分为一组,非重要声明为一组,重要声明的特殊性总大于非重要声明,每组元素的特殊性内部分别计算。
继承
继承无特殊性,比0特殊性还弱
层叠
创作人员样式胜过读者样式,有!important样式读者样式要强于其他所有样式,包括有!important样式的创作者样式,创作人员样式和读者样式都比用户代理的默认样式强。
按特殊性排序,较高特殊性的元素权重大于较低特殊性的元素
按出现顺序排序,一个声明在样式表中出现的顺序越靠后,权重越大。一般认为导入样式表中的声明在前,主样式表中的所有声明在后。
!important 强于内联样式
权重的大小顺序为
1、读者的重要声明
2、创作人员的重要声明
3、创作人员的正常声明
4、读者的正常声明
5、用户代理声明
link-visited-hover-active顺序的原因
根据越往后的权重越大原则,actice最先,之后是hover 再是visited 再是link
如果写作:
:active{ }
:hover{}
:link{}
:visited{}
因为一个元素要么是访问过的要么是未访问的,总会覆盖hover,
根据这一规则,想要让未访问的有悬停样式,已访问的没有可以写为:
:link--:hover--:visited--:active
:visited会覆盖hover
为避免冲突,可以使用伪类串联
:link:hover{} 这种写法合法
:link{color:green}
:visited{color:blue}
:link:hover{color:red}
:visited{color:black}