逻辑选择器中的父选择器功能介绍来了吗？

本文共计5778个文字，预计阅读时间需要24分钟。

在CSS选择器家族中，新增了一类比较新的选择器：逻辑选择器。目前共有4个成员：:is、:where、:not、:has。本文将带大家深入了解这些选择器，并写出更现代化的选择器。

首先，:is 选择器可以匹配所有具有指定类名的元素，包括嵌套元素。例如，:is(.class) 将匹配所有具有 class 类名的元素。

其次，:where 选择器可以用于过滤具有特定属性值的元素。例如，:where([data-type=value]) 将匹配所有具有 data-type 属性且值为 value 的元素。

接着，:not 选择器用于排除匹配特定条件的元素。例如，:not(.exclude) 将匹配所有不包含 exclude 类名的元素。

最后，:has 选择器用于匹配包含特定子元素的父元素。例如，:has(.child) 将匹配所有包含具有 child 类名的子元素的父元素。

通过这些逻辑选择器，我们可以写出更简洁、更现代化的CSS代码，提高代码的可读性和可维护性。

在 CSS 选择器家族中，新增这样一类比较新的选择器 -- 逻辑选择器，目前共有 4 名成员：

• :is
• :where
• :not
• :has

本文将带领大家了解、深入它们。做到学以致用，写出更现代化的选择器。

---

:is 伪类选择器

:is() CSS伪类函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。