使用 1 个 css 类为孩子交换样式

Question

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

该 div 有 2 个子 div。当 .active 未应用于 div 时，一个 child1 为黄色，child2 为绿色。 当我申请 $("#slot").addClass("active") 之类的操作时，我希望 child1 为蓝色，child2 为红色。

如何为“孩子”编写 css，以便在其父“插槽”上切换 .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;}