【学习笔记】CSS优先级规则

　　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可以交换位置，因为一个链接要么访问过要么没访问过，不可能同时满足，也就不存在覆盖的问题。

巴特西

【学习笔记】CSS优先级规则

最新文章

热门文章