CSS 选择器：:is(), :where(), 和:has()伪元素的运用

css的伪元素:is()、:where() 和:has()是用于样式化元素的非常强大的工具，它们是在 CSS 选择器 Level 4 规范中引入的。它们允许我们将样式应用于符合特定条件的任何元素，例如元素的类型、元素的位置和元素的后代，它们用于选择元素中的特定内容或子元素。

:is()伪元素用于根据元素的选择器选择子元素。例如，如果你想要针对所有类名为 isPink 或 isPretty 的元素进行定位，可以使用:is()伪类。

div:is(.isPink, .isPretty) {
  color: pink;
}

<div class="isPink">
  <p>
    Pink
  </p>
</div>

<div class="isPretty">
  <p>
    Pretty
  </p>
</div>

<div>
  <span>
    Not Pretty
  </span>
</div>

:where()伪元素用于根据元素的父元素选择子元素。例如，如果你想要定位所有类名以 bold 开头的元素，可以使用 :where()伪类来实现，将以下伪类添加到上述CSS文件中，将导致任何具有以 bold 开头的CSS类的子元素渲染为粗体。

div:where([class^="bold"]) {
  font-weight: bold;
}
<div class="isPink">
  <p>
    Pink
  </p>
</div>

<div  class="bold_text isPretty">
  <p>
    Pretty
  </p>
</div>

:has()伪元素用于根据元素是否包含另一个元素来选择元素，它以选择器作为参数，并在元素具有与选择器匹配的后代时返回 true。

例如，如果你想要定位所有包含元素的元素，可以使用 :has() 伪类来实现。在这一步中，我们的 HTML 没有任何变化。这个 CSS 的添加使得元素具有紫色的背景。

div:has(p) {
  background-color: purple !important;
}

这些伪元素非常灵活，并且可以根据您的特定需求组合使用。例如，您可以使用:where()和:has()来选择一个元素，该元素是另一个元素的子元素，同时具有特定的类名。