我想为h1,h2,h3等提供两种不同的风格。
我尝试使用类的样式:
.version-one{
h1{
...
}
h2{
...
}
}
然后在html:
<h1 class="version-one">Title</h1>
但是这没用。有没有办法做到这一点?
非常感谢:)
答案 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>
这很有效。
答案 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; }