CSSに複数のクラスを持つ要素をクエリする方法はありますか？

Question

同時に2つのクラスを持つ要素をクエリするにはどうすればよいですか？例えば

：

<div><span class="major minor">Test</span></div> 

私は同時に「主要」と「マイナー」のクラスを持っているすべてのスパンのスタイルを設定します。

Answer 1

次は、トリックを行う必要があります。

span.major.minor { color: red; } 

は、Internet Explorer 6でこれに注意する必要があります - それは唯一のセレクタの最後のクラスを読み込みます。例えば、それは間違って次のように、上記のルールを適用します。

<span class="minor">Test</span> 

Answer 2

は例えば、二回クラス修飾子を使用します。：

.major.minor { ... } 

しかし。 IE6（またはIE7の場合はQuirks Modeのいずれか）では動作しません。同じ要素に複数のクラスセレクタを指定すると、IEは最後のクラスセレクタにのみ注意を払います。したがって、上記のセレクタはclass="minor"の要素と一致します。

回避策は、単一のクラスとして複数のクラスを複製：

.major-minor { ... } 
<span class="major minor major-minor">...</span> 

あるいは、予備の要素は、それがきれいに作るために使用可能である場合、封じ込め：！

.major .minor { ... } 
<span class="major"><span class="minor">...</span></span>