css - 如何确定 CSS 类的优先级？

Question

我引用了一些 Bootstrap 样式表并且有一个定义

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

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

1. 删除/更改有问题的 CSS 文件(使用 bootstrap 很困难，但可行，如果您决定更新 bootstrap.css，维护会很头疼)
   • 更新/删除有问题的选择器
   • 添加 :not() 选择器以避免某些情况
2. 改变您的 HTML 结构，使其不遵循有问题的 CSS 选择器。
   • 更改类名和/或使用新的类名
   • 插入/删除额外的嵌套 div/元素(避免 > 直接子选择器)

谢天谢地，如果你有很多类要更新，smart regex replace是你最好的 friend ，但那是另一个话题。