Question

我正在引用一些引导样式表，并且有

的定义

.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;
}

修改：其他选项可包括：

删除/修改有问题的CSS文件（如果您决定更新bootstrap.css，则难以使用引导程序，但是可行，并且维护很麻烦）
- 更新/删除违规选择器
- 添加:not()选择器以避免某些情况
更改HTML结构，以便 NOT 跟踪有问题的CSS选择器。
- 更改班级名称和/或使用新班级
- 插入/删除其他嵌套的div /元素（以避免>直接子选择器）

值得庆幸的是，如果您要更新许多课程，smart regex replace是您最好的朋友，但这是另一个主题。

Answer 2

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

.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类的优先级？

4 个答案: