#yyds干货盘点#CSS的:has伪类可以做什么

​​:has​​伪类是一个非常强大的伪类，强大到难以置信，可以做很多梦寐以求的事情，很多以前只能更改文档对象结构或者只能用 JS 才能实现的功能现在也能纯 CSS 实现了，一起看看吧。

简单介绍一下​​:has​​

​​:has​​伪类的语法非常简单，表示满足一定条件后，就会匹配该元素。

​例如，下面的选择器只会匹配直接包含​​img​​子元素的​​a​​元素：

a:has(> img)

再例如，下面的选择器只会匹配其后紧跟着​​p​​​元素的​​h1​​元素

h1:has(+ p)

以我个人的理解来看，去除​​:has()​​后，剩下的选择器仍然是完整的

a>img

加上​​:has()​​​后，可以选中最前面的元素​​a​​。

好了，语法其实就这么多，估计没啥吸引力，关键是实际应用。下面通过几个实例来感受一下​​:has​​伪类的强大魅力~

温馨提醒：兼容性要求需要 Chrome 101+，并且开始实验特性（105+正式支持），Safari 15.4+，Firefox 官方说开启实验特性可以支持，但是实测并没有（???）

表单元素必填项

先来看一个简单例子，下面有一个表单元素，有一些是必填项

<form>
  <item>
    <label>用户名</label>
    <input required>
  </item>
  <item>
    <label>备注</label>
    <input>
  </item>
</form>

现在可以通过​​:has​​在必填项的前面加上红色的星号

label:has(+input:required)::before{
  content: '*';
  color: red;
}

这个应该还比较好理解，通过​​:has​​​和​​+​​​可以选中满足条件的​​label​​​，然后再生成​​::before​​​伪元素。如果是在以前，可能需要手动添加类名，或者改变​​html​​的书写顺序