如何覆盖引导面板标题颜色

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

还有几个。我知道你可以帮助我们！重要，但我认为这不是正确的做法。你能帮帮我吗？

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

谢谢！

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>

希望这有帮助