css中选择器的优先级

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

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

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

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

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

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

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

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

html 复制代码

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

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

css 复制代码

#myPara {
    color: blue;
}

html 复制代码

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

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

css 复制代码

.important {
    color: green;
}

html 复制代码

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

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

css 复制代码

p {
    color: black;
}

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

css 复制代码

p {
    color: yellow !important;
}

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

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

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

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