CSS中:has()选择器未生效，代码实现是否存在错误？

你的CSS样式未生效的核心原因是**:contains()不是标准CSS选择器**——它仅属于jQuery等第三方库的扩展，浏览器原生CSS并不支持。搭配:has()使用时，整个选择器会因不支持的语法失效。

:has()本身在现代主流浏览器（Chrome 105+、Firefox 121+、Safari 15.4+）已得到支持，只需替换掉:contains()即可让样式正常工作。

修改方案：JavaScript辅助添加类（推荐） #

由于原生CSS没有直接的文本内容匹配选择器，我们可以用JavaScript给包含指定文本的元素添加自定义类，再通过CSS基于该类进行选择。

修改后的完整代码 #

<html>
<head>
<style>
/* 使用自定义类替代:contains() */
div.class2:has(div.class3:has(span.class4.text-sample)) + div.class5 div.class6 li.class7 {
    display: none;
}
div.class2:has(div.class3:has(span.class4.text-sample)) {
    background-color: azure;
}
</style>
</head>
<body>
<div class="class1">
  <div class="class2">
    <div class="class3">
      <span class="class4">SampleText</span>
    </div>
  </div>
  <div class="class5">
    <ul class="class6">
      <li class="class7">hello world</li>
    </ul>
  </div>
</div>

<script>
// 遍历所有class4的span，给包含目标文本的元素加类
document.querySelectorAll('span.class4').forEach(span => {
  if (span.textContent.includes('SampleText')) {
    span.classList.add('text-sample');
  }
});
</script>
</body>
</html>

关键说明 #

1. 替代:contains()：通过JavaScript检测span.class4的文本内容，给包含"SampleText"的元素添加text-sample类，CSS选择器改用这个类进行匹配。
2. :has()兼容性：确保你的浏览器版本符合要求，若需兼容更旧浏览器，可引入:has()的polyfill，但现代浏览器无需额外处理。

内容的提问来源于stack exchange，提问作者UI Admin