如何在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