如何控制类规范的优先级

Question

我有一些DOM元素，其中包含类foo和bar：

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

我希望控制它们之间的优先级。在w3c specification on this之后，我认为在css中添加额外的选择器可能会使优先级更高。例如，如果我希望foo覆盖bar，我就会考虑像这样放置dummy类：

.foo, .dummy{
  ...
}

.bar{
  ...
}

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

Answer 1

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

示例：

.bar {
    color : red;
}

.foo {
    color: blue;
}

div的颜色为蓝色。

你建议的是什么，但你需要将虚拟类添加到div（所以css选择器将匹配）

示例：

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