html - css 如果父母有班级，则选择班级

Question

如果父类更改，我可以以某种方式选择一组元素吗？就像在这些例子中一样。父类可以是 alertStateTrue 或 alertStateFalse。

<div id="parent" class="alertStateTrue">
   <div class="childAlertStateTrue"></div>
   <div class="childAlertStateTrue"></div>
   <div class="childAlertStateFalse"></div>
   <div class="childAlertStateFalse"></div>
</div>

.alertStateTrue .childAlertStateTrue
{
   display: block;
}

.alertStateTrue .childAlertStateFalse
{
   display: none;
}

.alertStateFalse .childAlertStateTrue
{
   display: none;
}

.alertStateFalse .childAlertStateFalse
{
   display: block;
}

Answer 1

是的，您可以根据其父元素选择元素：

.a .b {}

上述规则将选择其中的所有.b元素.a。

---

暗示

您可以通过对具有确切规则的选择器进行分组来压缩 CSS ：

.alertStateFalse .childAlertStateFalse,
.alertStateTrue .childAlertStateTrue {
   display: block;
}

.alertStateTrue .childAlertStateFalse,
.alertStateFalse .childAlertStateTrue {
   display: none;
}

Answer 2

这在 CSS 结构中称为父子关系，您可以按照 NOX 答案进行操作。

如果您想比以下结构更具体，将对您有所帮助

使用你的#parent div.childAlertStateTrue

这将正常工作。