更改班级优先级[重复]答案

【问题标题】：Change class priority [duplicate]更改班级优先级[重复]
【发布时间】：2021-03-06 13:15:00
【问题描述】：

有一种情况需要更改班级优先级。例如：

.one {
  color: green;
}

.comment {
  color: gray;
}

.red {
  color: red !important;
}

<div class="one two red">Content</div>
<div class="comment two red">Content</div>

目前，.red color 已应用。是否可以强制.comment.red 从.comment 获取color？

注意：.comment color 未知（来自可变主题）。

【问题讨论】：

标签： html css

【解决方案1】：

是的，您可以使用多个类使其更具体。另外，我们知道.comment.red 至少需要两个类。所以我觉得这是允许的：

.one {
  color: green;
}

.comment.comment {
  color: gray;
}

.red {
  color: red;
}

<div class="one two red">Content</div>
<div class="comment two red">Content</div>

但是请摆脱!important。

.comment 的规则，而不是这样：

我们可以这样：

更多解释

现代浏览器使用规则树计算样式上下文。如果多个规则具有相同的权重、来源和特异性，则考虑样式表中写在下方的规则并获胜。

当这里只有一个选择器时：

.class1 {}

根据 CSS 的特殊性，上述规则的权重为 0010。同样的方法，如果有两个类：

.class1.class2 {}
.class1.class1 {}

请注意，在第二行中，我写了两次相同的课程。两者都将计算为0020，高于第一个，尽管存在“未知”类，但我们现在在规则中有两个类。

这与我在上面的示例中使用的相同技巧使主题更容易。

【讨论】：