Question

我想在div id =“slot1”上切换单个类.active。

div有2个子div。当.active未应用于div时，一个child1为黄色，child2为绿色。当我申请像$（“＃slot”）。addClass（“active”）这样的东西时，我希望child1为蓝色，child2为红色。

如何为“孩子”编写css，以便在他们的父“slot”上切换.active使他们切换状态

.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>

Answer 1

正常

.normal .a {
    background: yellow;
}

有效

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

对于其他相同的孩子，请参阅JSFiddle

如果您只想选择直接祖先（爸爸），您必须使用子选择器>

.normal > .a {
    background: yellow;
}

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

Answer 2

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

使用1个css类来交换子项的样式

2 个答案: