html - 如何覆盖 Bootstrap 面板标题颜色

Question

我知道像我这样的问题有很多。但是他们都没有工作。我有这个 html 文件:

<div class="container col-md-6 col-md-offset-3">
<div class="panel-group">
     <div class="panel panel-default">

        <div class="panel-heading-custom panel-heading ">Username</div>
        <div class="panel-body panel-info">{{ main.username }}</div>

     </div>
</div>

和这个 css 文件:

.panel-default > .panel-heading-custom {
    color: #333;
    background: black;
    border-color: #ddd;
 }

我尝试了很多选择:

.panel-heading.panel-default > .panel-heading.panel-default.panel-heading.panel.panel-heading

还有更多。我知道你可以 !important，但我认为这不是正确的方法。你能帮我吗？

这是我浏览器上显示的内容:

谢谢!

Answer 1

我猜你的样式被覆盖了。您可以确保您的样式不会被

1. 使用 !important
2. 您可以编写具有最高特异性的样式
3. 如果为特定类或选择器定义了两个/多个样式，最后出现的将生效

检查这个片段

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.panel-default>.panel-heading-custom {
    color: #333;
    background: black;
    border-color: #ddd;
 }
</style>

<div class="container col-md-6 col-md-offset-3">
<div class="panel-group">
     <div class="panel panel-default">

        <div class="panel-heading-custom panel-heading heading ">Username</div>
        <div class="panel-body panel-info">{{ main.username }}</div>

     </div>
</div>

希望对你有帮助