2

请参阅下面的代码，我想<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;
}
4

3 回答 3

4

您需要一个更具体的选择器。将第二条规则上的选择器更改为：

#main .page-header h1

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

#main h1               0101
.page-header h1        0011
#main .page-header h1  0111  <-- Winner!
于 2012-08-14T02:28:16.057 回答
1

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

h1 { all your properties }

上面甚至可以与多个h1标签一起使用，假设它们都驻留在其中#main（然后#main h1是多余的），然后如果您有.page-header h1组合类的特定样式将覆盖简单h1定义。

于 2012-08-14T02:42:05.557 回答
0

嘿，现在你可以做到这一点

#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。

于 2012-08-14T04:34:30.980 回答