:has()伪类使用

下面的 CSS 代码表示如果 <a> 元素里面有 <img> 元素，则这个 <a> 元素就会匹配。

a:has(img) { display: block; }

我们可以使用这个选择器轻松区分是文字链接还是图像链接

a:has(> img) { display: block; }

表示匹配子元素是 <img> 元素的 <a> 元素会被匹配，而关系更远的后代元素则不考虑

h5:has(+ p) { font-size: 1rem; }

 表示匹配后面跟随 <p> 元素的 <h5> 元素。

article:has(h5, p) { background-color: #f0f3f9; }

表示，只需要 <article> 元素内有 <h5> 元素或者有 <p> 元素就会匹配，是或的关系，不是与。如果希望是与的关系，也就是同时有 <h5> 元素和 <p> 元素才匹配，则可以试试下面的写法：

article:has(h5):has(p) { background-color: #f0f3f9; }

 :has() 伪类还可以和其他伪类混用，例如 :checked、:enabled 等，甚至还可以和其他逻辑伪类混用，例如：

section:not(:has(h5)) {
  border: skyblue solid;
}
section:has(:not(h5)) {
  color: deepskyblue;
}

前面的选择器表示没有包含 <h5> 元素的 <section> 元素有天蓝色边框，而后者表示包含不是 <h5> 元素的 <section> 元素颜色深天蓝色。

有了:has()伪类，理论上页面中任意DOM变化都可以被其他DOM元素感知到，例如：

body:has(.eleA-active) .eleB {
  background-color: var(--primary-color);
  color: #fff;
}

以上学自于前辈的博客