2

div id="slot1" で単一のクラス .active を切り替えたい。

div には 2 つの子 div があります。.active が div に適用されていない場合、1 つの child1 が黄色、child2 が緑色になります。$("#slot").addClass("active") のようなことを適用すると、child1 が青になり、child2 が赤になります。

親の「スロット」で .active を切り替えると状態が切り替わるように、「子」の css を作成するにはどうすればよいですか

.normal{}
.active{}
.a{color:yellow;}
.b{color:green;}

.a [when .active is applied to my daddy] {color:blue;}
.b [when .active is applied to my daddy] {color:red;}

<div id="slot1" class="normal">
  <div class="a">normal I'm yellow, with active I'm blue</div>
  <div class="b">normal I'm green, with active I'm red</div>
</div>

<div id="slot2" class="normal active">
  <div class="a">normal I'm yellow, with active I'm blue</div>
  <div class="b">normal I'm green, with active I'm red</div>
</div>
4

2 に答える 2

2

普通

.normal .a {
    background: yellow;
}

アクティブ

.normal.active .a {
    background: blue;
}

他の子については、JSFiddleを参照してください。

直接の祖先 (パパ) のみを選択する場合は、子セレクターを使用する必要があります。> 

.normal > .a {
    background: yellow;
}

.normal.active > .a {
    background: blue;
}
于 2013-10-25T20:46:00.357 に答える
1 
.a{color:yellow;}
.b{color:green;}

#slot1.active .a, #slot2.active .a {color:blue;} /*No daddy selector, but you can just get the child of .active*/
#slot1.active .b, #slot2.active .b {color:red;}
于 2013-10-25T20:45:39.420 に答える