2

我想为 h1、h2、h3 等提供两种不同的样式。

我尝试对这样的样式使用类：

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

然后在html中：

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

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

非常感谢 ：）

4

4 回答 4

7

您使用 css 选择器并不正确​​。

要在页面上选择具有类version-one（或分别为版本二）的 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 元素而不是此类的其他元素（例如段落）。

于 2013-06-04T07:51:35.163 回答
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>

这行得通。

jsfiddle

于 2013-06-04T07:59:40.167 回答
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; }
于 2013-06-04T07:56:42.670 回答
0

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

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

.varient2 h1 { color: Blue; }
.varient2 h2 { color: Yellow; }
于 2013-06-04T07:55:16.683 回答