css - 如何控制类规范的优先级

Question

我有一些具有类的 DOM 元素foo和bar：

<div class="foo bar">...</div>

我想控制它们之间的优先级。遵循w3c 规范，我认为向 css 添加额外的选择器可能会使优先级更高。例如，如果我想foo覆盖bar，我正在考虑放置一个这样的dummy类：

.foo, .dummy{
  ...
}

.bar{
  ...
}

这行得通吗？有一个更好的方法吗？我知道!important可以控制单个属性，但我想要一个更通用的解决方案来控制整个类规范的优先级。

score 3 · Accepted Answer

如果您首先为 .bar 类添加规则，然后为 .foo 添加规则，则 .foo 规则将覆盖 .bar 的规则

例子：

.bar {
    color : red;
}

.foo {
    color: blue;
}

div 的颜色为蓝色。

您建议的内容将起作用，但您需要将虚拟类添加到 div （以便 css 选择器匹配）

例子：

<div class="foo bar dummy">...</div>

1 回答 1