CSS无比强大的:has伪类的使用技巧

1. 一、简单介绍一下:has
2. 二、表单元素必填项
3. 三、拖拽指定区域
4. 四、多层级 hover
5. 五、评星组件
6. 六、日期范围选择

:has伪类是一个非常强大的伪类，强大到难以置信，可以做很多梦寐以求的事情，很多以前只能更改 dom 结构 或者只能用 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>

效果：

完整 demo：点击这里