请举例说一下css的优先级

• css 优先级

• 特指度：
• 样式来源顺序：
• 重要性：

• 详细的示例说明

• 内联样式（行内样式）：
• ID 选择器：
• 类选择器、属性选择器和伪类选择器：
• 标签选择器和伪元素选择器：
• !important 规则：

css 优先级

CSS 的优先级是由选择器的特指度（Specificity）和重要性（Importance）决定的，以下是优先级规则：

特指度：

• ID 选择器 (#id): 每个ID选择器计为100。
• 类选择器 (.class)、属性选择器 ([attr]) 和伪类选择器 (:hover, :focus 等): 每个此类选择器计为10。
• 元素选择器 (p, div, span 等) 和伪元素选择器 (::before, ::after 等): 每个元素或伪元素选择器计为1。

优先级计算是将所有类型的选择器的分数相加。例如，#header .nav-link 的特指度就是 100 + 10 = 110。

样式来源顺序：

• 行内样式（内联样式）：通过HTML元素的 style 属性直接定义的样式具有最高的特指度，除非遇到 !important 规则。
• 内部样式表（在 <style> 标签中定义的样式）。
• 外部样式表（通过 <link> 标签引入的样式表）。
• 浏览器默认样式。

当两个规则特指度相同时，最后定义的规则会覆盖之前的规则（就近原则）。

重要性：

• !important 规则：当一个声明后面跟有 !important，它会覆盖任何其他相同属性且没有 !important 的声明，无论其特指度如何。

总结来说，按照优先级从高到低排序如下：

• 行内样式（style=""），带有 !important 或不带
• ID 选择器 (#id) 带有或不带 !important
• 类选择器、属性选择器、伪类选择器等带有或不带 !important
• 元素选择器、伪元素选择器带有或不带 !important
• 最后定义的同优先级规则（对于非 !important 规则）

在实际应用中，尽量避免滥用 !important，因为它会降低代码可维护性和可预测性。

通常情况下，合理使用选择器以及遵循良好的层叠规则即可解决大部分样式冲突问题。

更多详细内容，请微信搜索“前端爱好者“， 戳我查看 。

详细的示例说明

CSS样式优先级是由选择器的类型和特指度决定的，以下是一个详细的示例说明：

内联样式（行内样式）：

<p style="color: red;">这是一个红色段落</p>

在这个例子中，元素的颜色被设置为红色，由于样式直接写在了元素的style属性中，所以其优先级最高。

ID 选择器：

#myPara {
    color: blue;
}

<p id="myPara">如果这个段落有id='myPara'，则应该是蓝色</p>

ID选择器（如#myPara）具有较高的优先级。在上述代码中，如果有其他不那么具体的样式试图改变段落颜色，但该段落有ID且通过ID选择器设置了颜色，则最终颜色将是蓝色。

类选择器、属性选择器和伪类选择器：

.important {
    color: green;
}

<p class="important">这是一个绿色段落，因为它应用了重要类</p>

类选择器（.important）的优先级高于标签选择器。因此，即使其他地方定义了对所有元素的文本颜色，带有class="important"的段落将显示为绿色。

标签选择器和伪元素选择器：

p {
    color: black;
}

这里所有的元素默认颜色是黑色。但是，如果前面的例子中的任一更高优先级的选择器也作用于元素，它们会覆盖这个标签选择器的效果。

!important 规则：

p {
    color: yellow !important;
}

当 !important 修饰符用于某个声明时，它会提升该声明的优先级，使其高于其他任何非!important声明，即使是更具体的选择器。所以在上面的例子中，尽管之前可能有其他优先级更高的选择器设置了颜色，但加上!important后，元素将以黄色显示。

总结来说，按照优先级从高到低排序如下：

• 行内样式（style=""）
• ID选择器 (#id)
• 类选择器、属性选择器、伪类选择器 (.[class], [attr], :hover, 等)
• 标签选择器、伪元素选择器 (p, div, :before, 等)
• !important声明可以应用于以上任意选择器，并强制提升其优先级

当多个规则同时应用于一个元素时，优先级高的规则生效。

如果两个选择器具有相同特指度（例如两个类选择器），则根据CSS文件或样式表加载顺序来确定（后来加载的样式通常会覆盖先前加载的同优先级样式）。

原文始发于微信公众号（前端爱好者）：请举例说一下css的优先级

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/267218.html