html - CSSで異なる見出し(h1、h2、...)のスタイルを設定する方法は?

Question

h1、h2、h3 などに 2 つの異なるスタイルが必要です。

次のようなスタイルにクラスを使用してみました：

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

そして、htmlで：

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

しかし、これはうまくいきませんでした。これを行う方法はありますか？

どうもありがとうございました ：）

Answer 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

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