如何确定 CSS class 的优先级？

Question

我指的是一些 bootstrap 风格 sheet 并且有一个

的定义

.badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #777;
    border-radius: 10px;
}
.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

我想使用这种风格，但由于我的 HTML class="alert-success badge"，它被其他定义覆盖了

.panel-default>.panel-heading .badge {
    color: #f5f5f5;
    background-color: #333;
}

既然后一个定义更具体，它优先于我想要的 CSS。我该如何解决？

编辑： 还有很多其他类有这个问题。有没有不需要一一指定的解决方案？

Answer 1

使用 CSS Specificity，您应该只用自己的选择器覆盖更具体的选择器。

.panel-default > .panel-heading .badge.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

编辑： 其他选项可以包括：

Removing/Altering 有问题的 CSS 文件（bootstrap 有困难，但可行，如果您决定更新 bootstrap.css，维护会很头疼）
- Update/remove 个违规选择器
- 添加 :not() 选择器以避免某些情况
改变您的 HTML 结构，使其不遵循有问题的 CSS 选择器。
- 更改 class 名称 and/or 使用新名称
- Inserting/Deleting 附加嵌套 divs/elements（避免 > 直接子选择器）

幸运的是，如果您有很多 class 需要更新，smart regex replace 是您最好的朋友，但那是另一个话题了。

Answer 2

似乎没有简单而优雅的解决方案，所以我只是做了简单的解决方法。我复制了徽章 css 并给它起了一个新名称，而不是使用 bootstrap 徽章 class。伤心。

.panel-default > .panel-heading .alert-badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border-radius: 10px;
}

Answer 3

ID 选择器的特异性优先级高于 CLASS。如果您可以添加 id，它将覆盖 .panel-default>.panel-heading .badge

.panel-default>.panel-heading .badge {
    color: #f5f5f5;
    background-color: #333;
}

#custom.badge{
  background-color: #f00;
}


<div class="panel panel-default">
    <div class="panel-heading">
    <div class="badge">class target</div>
    <div id="custom" class="anything badge">id target</div>
    </div>
</div>

这是 mozilla 文档的具体说明， https://developer.mozilla.org/en/docs/Web/CSS/Specificity

谢谢！

Answer 4

你知道我不确定你的解决方案是否注册为 css。我必须这样做才能显示结果。我认为 CSS 只是语法错误。

.panel-default > .panel-heading, .panel-default > .badge{
    color: #f5f5f5;
    background-color: #333;
}

我之所以注意到这一点，是因为这次我实际测试了我的代码。

如何确定 CSS class 的优先级？

How to prioritize a CSS class?

css

css-specificity