html - 如何防止H1继承？

Question

看下面代码，我要<h1>使用 .page-header h1类，但它使用 #main h1

如何在不修改的情况下防止这种情况 #main h1 ？

<div id='main'>
 <div class="page-header">
        <h1>This is a title</h1>
 </div>
</div>

CSS

#main h1 {
 line-height: 30px;
 font: 28px Arial, Helvetica, sans-serif;
 color: #333;
 font-weight: 300;
}

.page-header h1 {
    color: white;
    font-size: 28px;
    line-height: 20px;
    margin: 12px 0 11px 11px;
}

Answer 1

您需要更多 specific选择器。将第二条规则的选择器更改为:

#main .page-header h1

比较每个选择器的特异性值:

#main h1               0101
.page-header h1        0011
#main .page-header h1  0111  <-- Winner!