您的当前位置:首页>全部文章>文章详情

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

发表于:2023-06-18 10:08:24浏览:264次TAG: #css #css伪类

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()来选择一个元素,该元素是另一个元素的子元素,同时具有特定的类名。