CSS的优先级规则很多地方的说法都是错误的,常见错误说法是inline css>内部样式>外部样式,其实并没有这种规定。真正的CSS优先级确定是通过特性值大小确定的,在特性值大小相同的情况下,哪个样式出现在最后采用哪个样式。
在大型复杂系统或css样式太多的情况下,同一个元素可能有多个css样式能够指定,但最终只有一种样式能够真正使用,这时我们就需要通过特性值大小来确定采用何种样式了。(注:css样式书写推荐使用层级嵌套,明确的层级嵌套能够更好得给我们希望的元素设置样式,预防出现奇怪的样式冲突问题)。
真正的优先级规则是指:!important> inline css > id选择器 > class选择器 > tag选择器,假设我们给定 inline css 权重为A,id选择器权重为B,class选择器权重为C,tag选择器权重为D。那么存在A>B>C>D这种关系,且n个B(C,D)无论怎么加永远小于A(B,C)的权重。(有意思的是有些选择器(Firefox 52.0.2 (64 位)、IE11等)认为class选择器的数量大于255时会超过id选择器,不过这种情况通常不存在,没人写那么多选择器)。在判定一个元素使用哪一个样式时(不包含inline css且没有!important的情况下),先比较多个样式中A权重的多少,如果一样再比较B,直到比较到D为止,如果ABCD都一样,使用最后引用的那个样式。(我们通常说内部样式>外部样式通常是因为内部样式引用顺序在外部样式引用顺序之后,其实这两种方式根本就没有优先级关系,只有先后关系)。(还有一点,真正上我们并不区分内部样式和外部样式,硬要区分的话才做划分)。
有个先后顺序确定优先级的比较好的例子:我们知道a标签有四种状态:链接访问前、链接访问后、鼠标滑过、激活,分别对应四种伪类:link、:visited、:hover、:active,并且这四个伪类如果对同一个元素设置同一个属性,那它们的声明顺序还有一定要求,一般大家都遵循“LVHA”(爱恨原则love hate)。根据css优先级计算规则,伪类的特殊性值是C,4个伪类的特殊性值相同,那么后面声明的规则优先级高。当鼠标滑过a链接时,满足:link和:hover两个伪类,要改变a标签的颜色,就必须将:hover伪类在:link伪类后面声明;同理,当鼠标点击激活a链接时,同时满足:link、:hover、:active三种状态,要显示a标签激活时的样式(:active),必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。这个顺序能不能变?可以,但也只有:link和:visited可以交换位置,因为一个链接要么访问过要么没访问过,不可能同时满足,也就不存在覆盖的问题。