html - 优先处理部分 CSS 选择器

Question

在数学中，运算顺序提供了优先级运算的基本轮廓，并提供了括号作为覆盖此顺序的方法。例如，x + y * z = x + (y * z) 但是 x + y * z != (x + y) * z。

有没有办法在 CSS 中实现这种效果？哪些选择器优先，我如何强制低优先级的选择器优先？

Answer 1

你要找的是Specificity .链接的文章解释得很好。

基本上，哪个选择器具有优先权取决于该选择器的具体程度。作为一个比较直观的示例，.red.fruit 比 .fruit 更特定，因为它有两个类名。因此，在您的 CSS 代码中，即使 .fruit 选择器出现在 .red.fruit 之后，更具体的选择器优先。

不过，它不仅仅是拥有多个类名。可以想象，不同类型的选择器具有不同级别的优先级。例如，ID 选择器被认为是非常具体的，因为只有一个元素可以(嗯，应该)具有给定的 ID。一般来说，这个顺序是这样的，从最具体到最少:

内联样式 > ID 选择器 > 类、属性和伪类选择器 > 元素和伪元素

一定要阅读这篇文章以获取更多信息。

---

现在，综上所述，我认为值得一提的是，作为一个好的经验法则，您的目标应该是让您的选择器尽可能不具体。换句话说，在可以避免的地方尽量不要使用 ID 选择器或内联样式，并使用最少数量的必要类名来选择您想要的元素。

遵循这一原则可以使您的 CSS 从长远来看更加灵活且更易于阅读。