css优先级介绍：ID优先级、class与元素选择器

╰半夏微凉° 2024-03-25 10:44 87阅读 0赞

![31e3c653d5c3b1e1cf6c5c987f1476be.jpeg][]

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][Link 1]

在面试之前对[css优先级][css]的理解是 ：ID优先级>class>元素[选择器][Link 2]，外联样式优先级低于内联样式，内联样式优先级低于行间样式，然后就没有然后了……，[ID选择器][ID]的优先级确实>class选择器的优先级>元素选择器的优先级，但是外联样式优先级并不一定低于内联样式优先级。做为一个合格的前端工程师，让我们彻底搞清楚css优先级计算规则吧！

特殊性

css继承是从一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用哪些值时，浏览器不仅要考虑继承，还要考虑声明的特殊性，另外需要考虑声明本身的来源。这个过程就称为层叠。——《css权威指南》

上面这句话有两个词需要稍作解释，“声明”和“特殊性”。如下图，css规则由选择器和声明块组成，写在选择器后面大括号里的就叫声明。

实际上，同一个元素可以使用多个规则来指定它的字体颜色，每个规则都有自己的选择器。显然最终只有一个规则起作用（不可能一个字既是红色又是绿色），那么该规则的特殊性最高，特殊性即css优先级。很多同学仅仅知道选择器优先级ID>class>元素选择器，而不知道ID的优先级为什么大于class的优先级。那么css优先级到底是怎么计算的呢？

选择器的特殊性值表述为4个部分，用0,0,0,0表示。

ID选择器的特殊性值，加0,1,0,0。

类选择器、属性选择器或伪类，加0,0,1,0。

元素和伪元素，加0,0,0,1。

通配选择器\*对特殊性没有贡献，即0,0,0,0。

最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。

css specificity

规则

1、行内样式优先级specificity值为1,0,0,0 高于外部定义

如<div style="height:50px; width:50px;">Div</div> //行内样式

外部定义指经由<link>或<style>标签定义的规则

2、按CSS代码中出现的顺序决定，后者CSS样式居上；（近水楼台 先得月）

3、!important声明specificity值优先级最高

4、由继续而得到的样式没有specificity的计算，它低于一切其他规则（比如全局选择符\*定义规则）

例如：以下规则中选择器的特殊性分别是：

1 a\{color: yellow;\} /\*特殊性值：0,0,0,1\*/2 div a\{color: green;\} /\*特殊性值：0,0,0,2\*/3 .demo a\{color: black;\} /\*特殊性值：0,0,1,1\*/4 .demo input\[type="text"\]\{color: blue;\} /\*特殊性值：0,0,2,1\*/5 .demo \*\[type="text"\]\{color: grey;\} /\*特殊性值：0,0,2,0\*/6 \#demo a\{color: orange;\} /\*特殊性值：0,1,0,1\*/7 div\#demo a\{color: red;\} /\*特殊性值：0,1,0,2\*/

对照下面的demo，来验证上面几组规则的正确与否：

<a href="">第一条应该是黄色</a> <div class="demo"> <input type="text" value="第二条应该是蓝色" /> <a href="">第三条应该是黑色</a></div><div id="demo"> <a href="">第四条应该是红色</a></div>

显示效果：

分析上面的demo，要注意特殊性是怎么排序的，上面第4行和第5行规则，第4行之所以优先级比第5行高，是因为第四行特殊性值最后面是1，而第5行特殊性值最后面是0。回过头来回答文章最开始的问题，为什么ID选择器的优先级比类选择器的优先级高？实际上是因为选择器特殊性值是从左向右排序的，特殊性值1,0,0,0大于以0开头的所有特殊性值，即便它是0,99,99,99，优先级依然比1,0,0,0要低。

前面有讲到通配选择器\*的特殊性值是0,0,0,0，而元素通过父元素继承过来的样式是没有特殊性值的，所以，通配选择器定义的规则优先级高于元素继承过来的规则的优先级。

细心的同学应该已经发现了，特殊性值中的4个0中的第一个0是给谁暗箱操作内定了吗？是的！DOM中的行间样式送了点红包，于是它就牛了。行间样式的特殊性是1,0,0,0。行间样式的优先级比ID选择器优先级高。

层叠

假如特殊性相同的两条规则应用到同一个元素会怎样？css会先查看规则的权重（!important），加了权重的优先级最高，当权重相同的时候，会比较规则的特殊性，根据前面的优先级计算规则决定哪条规则起作用，当特殊性值也一样的时候，css规则会按顺序排序，后声明的规则优先级高，成为人生赢家，当上总经理出任CEO迎娶白富美。

我们知道a标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪类:link、:visited、:hover、:active，并且这四个伪类如果对同一个元素设置同一个属性，那它们的声明顺序还有一定要求，一般大家都遵循“爱恨原则LVHA”（LoVe HAte），为什么是这个顺序？不能是其它顺序吗？

根据css优先级计算规则，伪类的特殊性值是0,0,1,0，4个伪类的特殊性值相同，那么后面声明的规则优先级高。当鼠标滑过a链接时，满足:link和:hover两个伪类，要改变a标签的颜色，就必须将:hover伪类在:link伪类后面声明；同理，当鼠标点击激活a链接时，同时满足:link、:hover、:active三种状态，要显示a标签激活时的样式（:active），必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。这个顺序能不能变？可以，但也只有:link和:visited可以交换位置，因为一个链接要么访问过要么没访问过，不可能同时满足，也就不存在覆盖的问题。

来源：[https://www.weidianyuedu.com][https_www.weidianyuedu.com]

[31e3c653d5c3b1e1cf6c5c987f1476be.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/cad5947eb2754758b5233bf2a327b2e7.png
[Link 1]: https://www.weidianyuedu.com/
[css]: https://so.csdn.net/so/search?q=css%E4%BC%98%E5%85%88%E7%BA%A7&spm=1001.2101.3001.7020
[Link 2]: https://so.csdn.net/so/search?q=%E9%80%89%E6%8B%A9%E5%99%A8&spm=1001.2101.3001.7020
[ID]: https://so.csdn.net/so/search?q=ID%E9%80%89%E6%8B%A9%E5%99%A8&spm=1001.2101.3001.7020
[https_www.weidianyuedu.com]: https://www.weidianyuedu.com