使用一个 CSS 选择器规则定位多个类的子级答案

【问题标题】：Target children of multiple classes with one CSS selector rule使用一个 CSS 选择器规则定位多个类的子级
【发布时间】：2017-07-31 05:46:47
【问题描述】：

假设我有以下 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 选择器规则来定位类名称为 subclass 的元素在类名称为 class1 或 class2 的祖先下？

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

对于少数项目，我会选择选项 2，对于许多项目，我会选择选项 1。选项 2 更具可读性和可修改性，复杂性更低。感谢您的明确答复。