Как переопределить заголовок панели заголовка

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. использования важно!
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>

Надеется, что это помогает