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!

Answer 2

您可以增加您的特异性，因为bfavaretto回答，或您可以降低您的特异性。对于h1标记尤其如此，因为许多人（像我一样）认为您应该在网页上只有一个h1标记。坚持这样的观点，减少显然是：

h1 { all your properties }

以上内容甚至可以与多个h1代码一起使用，假设所有代码都位于#main （然后#main h1是多余的），并且< em> then 如果您对.page-header h1具有特定样式，则组合类将覆盖简单的h1定义。

Answer 3

嘿，现在你可以这样做

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

因为

ID值超过类和标记示例

#main这是id，现在这是值100

H1这是HTML标记，此值为1

.page-header这是类，此值为10

现在根据值仔细定义css。

如何防止继承H1？

3 个答案: