html - CSS class1 > class2 意味?

Question

いくつかのコード サンプルで見た class1 > class2 { class definition } 。上記の記号は何を意味していますか？

Answer 1

がclass2の直接の子孫 (子) であるclass1場合、クラス を持つ要素にルールを適用しますclass2。

これはバージョン 7 以下では機能しないことに注意してください。

ちょっとしたデモ:

http://jsfiddle.net/jjqzK/

また、次のように記述する必要があることに注意してください。

.class1 > .class2.(名前だけでなく、クラス名の前にドット ( ) を付けます)

Answer 2

このデモを確認してください (削除/追加 (>) してください。そうすれば何が違うのかがわかります)

http://jsfiddle.net/pZtTy/1/

Answer 3

クラス 2 は、クラス 1 の直接の子です。例:

<div class="class1">
   <div class="class2">
     .....
   </div>
   <div class="class2">
     .....
   </div>
   <div class="class2">
     .....
   </div>
   .....
</div>

次に、次のように呼び出します。

.class1 > .class2{
    /* something */
}

次に、「class1」div 内の最初の「class2」div のみがスタイルの影響を受けます。