css之:is()、:where()和:has()伪元素的运用、使用、important-Toy模板网

这篇具有很好参考价值的文章主要介绍了css之:is()、:where()和:has()伪元素的运用、使用、important。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

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

is

:is()伪类可以用于基于选择器的组合来定位元素。它将一系列选择器作为其参数，并在元素匹配任何选择器时返回true。例如，如果你想要针对所有类名为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

:where()伪类可以根据条件来定位元素。它以条件作为参数，并在元素匹配条件时返回true。
例如，如果你想要定位所有类名以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>
伪元素:is()和:where()看起来在做同样的事情。但是，伪元素:is()用于根据选择器列表匹配元素，而伪元素:where()则用于根据条件匹配元素。

has

:has()伪类可以用于基于后代元素来定位元素。它以选择器作为参数，并在元素具有与选择器匹配的后代时返回true。
例如，如果你想要定位所有包含元素的元素，可以使用:has()伪类来实现。在这一步中，我们的HTML没有任何变化。这个CSS的添加使得元素具有紫色的背景。
div:has(p) {
  background-color: purple !important;
}
文章来源地址https://www.toymoban.com/news/detail-569563.html