CSS 优先级

在 CSS 中，样式的优先级非常重要，它可以决定哪种样式最终被应用。因此，了解 CSS 样式的优先级规则非常必要。

什么是 CSS 优先级？

简单来说，CSS 优先级是一个用于确定相同元素上不同 CSS 规则的优先级的值。这个值的大小决定了最终应用哪些规则的样式。

CSS 优先级计算规则如下：

在计算优先级时，只需要把相同的选择器类型的值相加，然后按照优先级高低依次比较即可。

举个例子：

css

div p.my-class#my-id[type='text']:hover::before {
	color: red !important;
}

这个选择器包含标签选择器（div、p）、类选择器（.my-class）、ID 选择器（#my-id）、HTML 属性选择器（[type="text"]）、伪类选择器（:hover）和伪元素选择器（::before），根据上面的计算规则，它的优先级为：

因此，这个选择器的总优先级是 133（2+10+100+10+10+1）。如果有两个优先级相同的规则，则后面的规则会覆盖前面的规则。

了解 CSS 优先级的计算规则之后，我们就可以合理地使用 CSS 的优先级来实现想要的效果。

例如，我们想要让某一个链接的颜色变为蓝色，而其他链接保持原来的颜色。我们可以这样写 CSS 代码：

css

a {
	color: black;
}

a.highlight {
	color: blue;
}

这个样式表中，第一个规则中的标签选择器权值为 1，第二个规则中的类选择器权值为 10，因此第二个规则的优先级更高，它可以覆盖第一个规则的样式。

CSS 优先级是 CSS 样式确定应用顺序的重要规则，可以根据优先级计算规则来合理地使用 CSS 样式。对 CSS 优先级的理解对 Web 开发非常重要。

总的来说，我们需要避免使用!important这个选择器，因为它会让代码变得不可预测。我们应该通过增加 CSS 选择器的具体性来提高它们的优先级。这样可以更好地维护代码、减少样式冲突。