4个好用的 CSS 伪类 not()、has()、 is()、where()

# 4个好用的 CSS 伪类 :not()、:has()、 :is()、:where()

**:not()**

* 定义：:not 伪类：用于选择不满足给定条件的元素，也被称为反选伪类。
* 语法：

```
:not(selector)
```

* 示例：除了class为.two, .five，其他的li元素背景颜色变为红色

```
<html>
<head>
  <style>
   ul :not(.two, .five) {
      background-color: red;
    }
</style>
</head>

<body>
  <ul>
    <li class="one">111</li>
    <li class="two">222</li>
    <li class="three">333</li>
    <li class="four">444</li>
    <li class="five">555</li>
    <li class="six">666</li>
  </ul>
</body>
</html>
```

效果如下：

![图片](http://banmag.cn:8089/i/2024/07/09/668cdaa8be8f0.webp)

* 浏览器兼容性：

![图片](http://banmag.cn:8089/i/2024/07/09/668cdaa8d0c89.webp)

**:has()**

* 定义：:has 伪类：用于选择包含特定子元素的元素
* 语法：

```
:has(selector)
```

* 示例：选择ul里面包含.two或.four元素的ul元素

```
<html>
<head>
  <style>
   ul:has(.two, .four) {
      background-color: red;
    }
</style>
</head>
<body>
  <ul>
    <li class="one">111</li>
    <li class="two">222</li>
  </ul>
  <ul>
    <li class="three">333</li>
    <li class="four">444</li>
  </ul>
  <ul>
    <li class="five">555</li>
    <li class="six">666</li>
  </ul>
</body>
</html>
```

* 效果如下：

![图片](http://banmag.cn:8089/i/2024/07/09/668cdaa8b1596.webp)

* 【注意】浏览器兼容性：

![图片](http://banmag.cn:8089/i/2024/07/09/668cdaa8b1b82.webp)

**:is()**

* 定义：:is 伪类：可以选择多个类名，而不需要编写多个选择器，从而简化了代码
* 语法：

```
:is(selector)
```

* 示例：选择 < ul > 元素下具有 .two、.four 或 .six 类的 < li > 元素，并将它们的背景颜色设置为红色

```
<html>
<head>
  <style>
   ul li:is(.two, .four, .six) {
      background-color: red;
    }
</style>
</head>
<body>
  <ul>
    <li class="one">111</li>
    <li class="two">222</li>
    <li class="three">333</li>
    <li class="four">444</li>
    <li class="five">555</li>
    <li class="six">666</li>
  </ul>
</body>
</html>

```

* 效果如下：

![图片](http://banmag.cn:8089/i/2024/07/09/668cdaa8a3c03.webp)

* 浏览器兼容性：

![图片](http://banmag.cn:8089/i/2024/07/09/668cdaa8ba6ee.webp)

**:where()**

* 定义：:where 伪类：用于选择满足给定条件的元素（与 :is 伪类类似），并可以与其他选择器组合使用
* 语法：

```
:where(selector)
```

* 示例：选择 < ul > 元素下具有 .two、.four 或 .six 类的 < li > 元素，并将它们的背景颜色设置为红色

```
<html>
<head>
  <style>
   ul li:where(.two, .four, .six) {
      background-color: red;
    }
</style>
</head>
<body>
  <ul>
    <li class="one">111</li>
    <li class="two">222</li>
    <li class="three">333</li>
    <li class="four">444</li>
    <li class="five">555</li>
    <li class="six">666</li>
  </ul>
</body>
</html>
```

* 效果如下：

![图片](http://banmag.cn:8089/i/2024/07/09/668cdb26c4770.webp)

* 浏览器兼容性：

![图片](http://banmag.cn:8089/i/2024/07/09/668cdb280ec7f.webp)

**:where()与:is() 的区别**

* :where() 伪类和 :is()伪类都是用于简化选择器的书写。它们都允许将多个选择器组合在一起，使用逗号分隔的选择器列表作为参数，以提供更简洁的选择器语法。
* 例如 :is(.class1, .class2, .class3)或者:where(.class1, .class2, .class3)。
* 语法差异如下：

* :is() 伪类在选择器的权重计算中起到作用，它会创建一个新的层级，在 CSS 规则中的权重计算中影响选择器的优先级，:is() 的优先级是由它的选择器列表中优先级最高的选择器决定。
* :where() 伪类不会创建新的层级，它只是作为语法上的辅助，提供更简洁的选择器语法，不会影响选择器的权重计算，:where() 的优先级总是为 0。

* 通过下面的代码示例来说明这两个伪类的区别：

```
<html>
<head>
  <style>
   ul li:is(.two, .four, .six) {
      background-color: red;
   }
   ul li:where(.two, .four, .six) {
      background-color: yellow;
      color: blue;
   }
</style>
</head>
<body>
  <ul>
    <li class="one">111</li>
    <li class="two">222</li>
    <li class="three">333</li>
    <li class="four">444</li>
    <li class="five">555</li>
    <li class="six">666</li>
  </ul>
</body>
</html>
```

* 显示效果：

![图片](http://banmag.cn:8089/i/2024/07/09/668cdb29254ee.webp)

可以看到：

**:where() 伪类中的background-color: yellow并未覆盖:is() 中的background-color: red，只有color: blue在生效，所以:where() 并未影响选择器的权重计算。**

> 原文地址 https://mp.weixin.qq.com/s/JHBRTzyy2mKbq_UtC8vDvA