如何在CSS中设置不同标题（h1，h2，...）的样式？

Question

我想有对H1，H2，H3等

我尝试使用类这样的样式两种不同的风格：

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

然后在html：

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

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

非常感谢你:)

Answer 1

你不correclty使用CSS选择器。

要选择你的网页，其中有一类的H1 version-one（或分别版本二），只需输入：

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元素。一个段落）。

Answer 2

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

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

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

Answer 3

在您的标记设置样式：

<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; } 

Answer 4

使用它反过来说，所以：

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