css :has伪类选择器

前言

在:has()选择器出现之前，可以通过css选择后代元素以及兄弟元素，只能选择平级或者是下级
而:has()能让我们通过下级元素去选择父元素，这给我们提供了一种新的操作css的方式

使用

.main-content .item {
  width: 100%;
  font-size: 14px;
  color: rgba(26, 29, 52, 0.9);
  padding: 10px 12px;
  background: #f2f3f5;
  border-radius: 8px;
}

.main-content .item {
  cursor: pointer;
}

.main-content .item:has(.is-has):hover {
  color: #fff;
  background: #2cabf8;
}

.main-content .item:not(:has(.is-has)):hover {
  color: rgba(26, 29, 52, 0.6);
  background: #ffdb66;
}

<div class="container">
  <div class="main-content">
    <p class="item">
      <span class="is-has">我是has</span>
    </p>
    <p class="item">
      <span>我不是has</span>
    </p>
    <p class="item">
      <span>我不是has</span>
    </p>
  </div>
</div>

• 对于后代有.is-has类名的父级元素(.item)，hover的时候背景改为#2cabf8，字体颜色改为#fff
• 对于后代没有.is-has类名的父级元素(.item)，hover的时候背景颜色改为#ffdb66，字体颜色改为rgba(26, 29, 52, 0.6)

总结

:has()伪类选择器可以轻松通过下级元素选中上级元素，并且可以结合其他的伪类一起使用

兼容性

参考

mdn
can i use