如何在CSS中设置不同标题(h1,h2,...)的样式?

时间:2013-06-04 07:48:55

标签: html css css-selectors

我想为h1,h2,h3等提供两种不同的风格。

我尝试使用类的样式:

.version-one{
h1{
    ...
}
h2{
    ...
}
}

然后在html:

<h1 class="version-one">Title</h1>

但是这没用。有没有办法做到这一点?

非常感谢:)

4 个答案:

答案 0 :(得分:5)

你使用css选择器并不合适。

要选择页面上具有类version-one(或分别为版本2)的h1,只需输入以下内容:

<强> HTML:

<h1 class="version-one">red headine</h1>
<h1 class="version-two">blue heading</h1>

<强> CSS:

.version-one {
    /* your styles for the class version-one */
    font-size: 3em;
    color: red;
}

.version-two {
    /* your styles for the class version-two */
    font-size: 3em;
    color: blue;
}

您还可以使用h1.version-one作为选择器,以确保您只使用此类定位h1元素,而不是使用此类定位其他元素(例如段落)。

答案 1 :(得分:1)

反过来使用它,所以:

CSS

.version-one h1 {
    color: red;
}
.version-one h2 {
    color: orange;
}

.version-two h1 {
    color: blue;
}
.version-two h2 {
    color: purple;
}

HTML

<div class="version-one">
    <h1>lorem lipsum</h1>
    <h2>lorem lipsum</h2>
</div>

<div class="version-two">
    <h1>lorem lipsum</h1>
    <h2>lorem lipsum</h2>
</div>

这很有效。

The jsfiddle

答案 2 :(得分:0)

你可以在容器元素上设置一个类并通过它设置样式

.varient1 h1 { color: Red; }
.varient1 h2 { color: Green; }

.varient2 h1 { color: Blue; }
.varient2 h2 { color: Yellow; }

答案 3 :(得分:0)

在你的标记中:

<h1 class="version1">Version 1</h1>
<h1 class="version2">Version 2</h1>
<h1 class="version3">Version 3</h1>

在你的CSS中:

.version1 { background: red; }
.version2 { background: blue; }
.version3 { background: green; }