【CSS】CSS优先级算法_css 多个规则优先级算法-优快云博客

本文链接：https://blog.youkuaiyun.com/amyleeYMY/article/details/63685330

本文介绍了CSS样式的优先级计算规则，包括行内选择符、ID选择符等四个级别的概念及优先级算法，并通过实例说明了优先级的具体应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS优先级：是由四个级别和各级别的出现次数决定的。

四个级别分别为：行内选择符、ID选择符、类别选择符、元素选择符

优先级算法：

每个规则对应一个初始“四位数”：0、0、0、0

若是行内选择符，则加1、0、0、0

若是 ID选择符，则加0、1、0、0

若是类选择符/属性选择符/伪类选择符，则分别加0、0、1、0

若是元素选择符/伪元素选择符，则分别加0、0、0、1

算法：将每条规则中，选择符对应的数相加后得到的“四位数”，从左到右进行比较，大的优先级越高。

需要注意的：

!important的优先级是最高的，但出现冲突时则需比较“四位数”

优先级相同时，则采用就近原则（外部样式<内部样式<内联样式）

继承得来的属性，其优先级最低

PS：伪类：:link、:visible、:hover、:active、:focus、:first-child

伪元素：:before、:after、:first-line、:first-letter

看下下面这个例子，p标签内的文字是什么颜色：

<style>
    .classA{ color:blue;}
    .classB{ color:red;}
</style>
<body>
    <p class='classB classA'> 123 </p>
</body>

red。与样式定义在文件中的先后顺序有关，后面的覆盖前面的，与在p标签中的class的先后顺序无关。