CSS 选择器优先级计算全解析

2025-12-27 2555阅读

在 CSS 中，选择器优先级的计算至关重要。它决定了样式如何应用到 HTML 元素上。

选择器优先级是通过特定规则计算的。内联样式具有最高优先级。例如：

<!DOCTYPE html>
<html>
<head>
    <style>
        p { color: blue; }
        <p style="color: red;">这是一个段落</p> <!-- 内联样式使颜色为红色 -->
    </style>
</head>
<body>
</body>
</html>

内联样式直接作用于元素，覆盖其他样式。

然后是 ID 选择器，其优先级高于类选择器、属性选择器等。如：

#special { color: green; }
.some-class { color: gray; }

ID 选择器唯一性高，所以优先级也高。

类选择器、属性选择器和伪类选择器优先级相同。例如：

.class1 { font-size: 16px; }
[type="text"] { border: 1px solid black; }
:hover { background-color: yellow; }

它们按在样式表中出现的顺序应用，后面的会覆盖前面相同选择器的样式。

元素选择器优先级最低。像 p、div 等元素选择器，只有在没有其他更高级别选择器时才会生效。

计算优先级时，会将不同选择器的权重相加。例如 style + id + class + element 的权重组合。权重高的样式会被应用，从而精准控制页面元素的显示样式，让页面呈现出开发者期望的效果。总之，掌握 CSS 选择器优先级计算，是打造精美页面的关键一环。

文章版权声明：除非注明，否则均为Dark零点博客原创文章，转载或复制请以超链接形式并注明出处。

相关阅读