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。一般来说，这个顺序是这样的，从最具体到最少：

内联样式＆gt; ID选择器＆gt;类，属性和伪类选择器＆gt;元素和伪元素

绝对阅读文章了解更多信息。

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

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

Answer 2

有多种方法可以优先处理CSS规则对HTML元素的影响。一些将包括更具体的选择器，如下所示：

section { background-color: red; }

section.header { background-color: green; }

在上面的示例中，具有标题类的节优先，因为您包含更具体的选择器。

其他考虑因素将是您如何引入css样式表（内联，嵌入和外部）。

在这种特殊情况下，包含内联CSS规则的元素将优先于嵌入式CSS规则，这些规则将优先于通过外部样式表应用的规则。

考虑到这些因素和考虑因素，您应该能够提出几种不同的方法来确定某些规则优先于其他规则。