时间戳

首页 > 解决方案 > 更改班级优先级

html - 更改班级优先级

问题描述

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

.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获取colorfrom .comment？

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

标签： htmlcss

解决方案

是的，您可以使用多个类使其更具体。此外，我们知道这.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 {}

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

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

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

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

推荐阅读