html - 使用一个 CSS 选择器规则定位多个类的 child

Question

假设我有以下 HTML 结构:

<div>
      <div class="class1">
          <p class="subclass">whatever</p>
      </div>
      <div class="class2">
          <p class="subclass">whatever</p>
      </div>
      <div class="class3">
          <p class="subclass">whatever</p>
      </div>
</div>

是否可以使用一个 CSS 选择器规则来定位具有类名 class1 或 class2 的祖先下具有类名 subclass 的元素？

Answer 1

您可以使用带有 :not() 的属性选择器来选择以 .class* 开头的任何内容并排除 .class3

[class^="class"]:not(.class3) .subclass {
  color: red;
}

<div>
      <div class="class1">
          <p class="subclass">whatever</p>
      </div>
      <div class="class2">
          <p class="subclass">whatever</p>
      </div>
      <div class="class3">
          <p class="subclass">whatever</p>
      </div>
</div>

你总是可以组合选择器

.class1 .subclass, .class2 .subclass {
  color: red;
}

<div>
      <div class="class1">
          <p class="subclass">whatever</p>
      </div>
      <div class="class2">
          <p class="subclass">whatever</p>
      </div>
      <div class="class3">
          <p class="subclass">whatever</p>
      </div>
</div>