深入了解 CSS 逻辑选择器：is、where、not、has

CSS 逻辑选择器是 CSS Selectors Level 4 中引入的新特性，它们为我们提供了更灵活和强大的选择器语法，从而使得样式表的编写更加高效和简洁。本文将重点探讨 is、where、not、has 这四种逻辑选择器，深入剖析其应用、优缺点以及浏览器支持情况。

is 选择器

is 选择器允许我们同时匹配多个选择器中的一个或多个，从而简化了选择器的书写，使得代码更易读。这对于在不同情况下应用相同样式的元素十分有用

代码示例

/* 通过 is 选择器匹配 h1 和 h2 元素 */
:is(h1, h2) {
  color: blue;
}

优点

• 提高了代码可读性和维护性。
• 简化了复杂选择器的书写，减少了代码冗余。

缺点

• 浏览器支持不够广泛，需要搭配其他选择器使用以保证兼容性。

浏览器兼容性

where 选择器

where 选择器用于创建一个作用域，使得内部的选择器只对指定的元素生效，从而增强了选择器的可维护性和灵活性。

代码示例

/* 创建作用域，只对 section 元素内的 p 元素生效 */
section:where(p) {
  color: red;
}

优点：

• 提高了选择器的可读性和可维护性。
• 有效降低了全局样式对其他元素的影响。

缺点：

• 浏览器支持有限，需要谨慎使用以保证兼容性。

浏览器兼容性

not 选择器

not 选择器用于排除指定的元素，从而更精确地选择需要样式化的元素。这使得我们可以更灵活地定义样式，避免不必要的重复或冗余。

代码示例

/* 排除 class 为 hide 的元素 */
:not(.hide) {
  display: block;
}

优点：

• 增强了选择器的精确性，避免了样式的冗余和重复。

缺点：

• 可能增加选择器的复杂度，降低了代码的可读性。

浏览器兼容性

has 选择器

has 选择器用于选择包含指定后代元素的父元素，为我们提供了一种方便的方式来选择包含特定内容的元素。

代码示例

/* 选择包含 p 元素的 div 元素 */
div:has(p) {
  border: 1px solid black;
}

优点：

• 提供了一种简便的方法来选择包含特定内容的父元素。

缺点：

• 目前仅部分浏览器支持，需要搭配其他选择器使用以保证兼容性。

浏览器兼容性

综上所述，逻辑选择器为我们提供了更丰富和灵活的选择器语法，使得样式表的编写更加高效和简洁。然而，由于部分选择器的兼容性问题，我们在使用时需要谨慎权衡，以确保代码的稳定性和可维护性。

原文链接： leviqin.top/topic-detai...