私はCSSでターゲットにする必要がある興味深いアイテムの種類を持って<hX>

Question

内をターゲット：それはクラスalert-messageとblock-messageと<div>の内側にある<h[1-6]>の内部<small>です。

それは基本的に次のようになります。

<div class="alert-message block-message"> 
    <h3> 
     Hello World 
     <small>And Hello Universe, too!</small> 
    </h3> 
</div> 

私が試した：

div.alert-message.block-message h1,h2,h3,h4,h5,h6 small 

と

明らか

div.alert-message.block-message h1 small, h2 small, h3 small, h4 small, h5 small, h6 small 

どちらも仕事を。これらの特定の<small>ブロックのフォント色を変更するだけです。上記の私のアプローチが要素を「発見」するのに何が問題になっていますか？これらをターゲットに

Answer 1

具体的には、あなたのセレクタは次のようにする必要があります：

div.alert-message.block-message h1 small, 
div.alert-message.block-message h2 small, 
div.alert-message.block-message h3 small, 
div.alert-message.block-message h4 small, 
div.alert-message.block-message h5 small, 
div.alert-message.block-message h6 small { 

} 

私はいつもh1-h6のための一般的なセレクタがあった望んだが、残念ながら我々は、別途それらすべてを対象とする必要があります。

要素を「見つける」上の私のアプローチで何が問題になっていますか？

ので、コンマ,別のセレクタ、ことに注意してください：LESSショートカットがありますかしら

div.alert-message.block-message h1 {/* styles */} 
h2 {/* styles */} 
h3 {/* styles */} 
h4 {/* styles */} 
h5 {/* styles */} 
h6 small {/* styles */} 

：

div.alert-message.block-message h1,h2,h3,h4,h5,h6 small {} 

は同じですか？

は、私の知っている見出しの近道はありませんが、あなたはこのように、ネストされたセレクタを使用することができますように見えます：

div.alert-message.block-message { 
    h1, h2, h3, h4, h5, h6 { 
     small {/* your CSS */} 
    } 
} 

Answer 2

カンマが全体のセレクタ、セレクタのない部分を分離して、あなたが期待しているように見えるよう。

div.alert-message h1,h2手段div.alert-message h1を選択し、h2（それらのすべて）を選択

あなたは

div.alert-message.block-message h1 small, div.alert-message.block-message h2 small, div.alert-message.block-message h3 small, div.alert-message.block-message h4 small, div.alert-message.block-message h5 small, div.alert-message.block-message h6 small 

Answer 3

ターゲットを一つの記述1内の各宣言を記述する必要があります。