如何用CSS选择器选中不含子元素div.bclass的div.aclass元素

你之前尝试的选择器都存在逻辑或语法问题：

• div.aclass:not(* > div.bclass)：:not()内部不允许直接使用子组合选择器，属于语法错误
• div.aclass:not(:scope > div.bclass)：:scope仅在特定API（如querySelector）场景下有限支持，普通CSS选择器中无法生效
• div.aclass:not(div.bclass)：这个选择器是排除自身为div.bclass的元素，和你要排除包含该子元素的父元素的需求完全不符

正确的CSS选择器 #

借助:has()伪类配合子选择器，就能精准定位目标元素：

div.aclass:not(:has(> div.bclass)) {
  /* 在这里编写你的样式规则 */
}

选择器逻辑拆解 #

• div.aclass：先定位所有class为aclass的div元素
• :has(> div.bclass)：筛选出直接包含class为bclass的div子元素的div.aclass
• :not(...)：把上述筛选出的元素排除，剩余的就是你需要的、不含直接子元素div.bclass的div.aclass

示例验证 #

用你提供的HTML结构测试：

<div class="aclass"><div class="bclass">Content</div></div>
<div class="aclass"><div class="cclass">Content</div></div>

给目标元素添加边框样式后，第二个div.aclass会被应用样式，第一个不会，完全符合需求。

兼容性说明 #

:has()伪类目前支持Chrome、Edge、Safari 15.4+，以及Firefox 121及以上版本。如果需要兼容更旧的浏览器，可通过JavaScript实现：

// 获取所有div.aclass元素
const aClassDivs = document.querySelectorAll('div.aclass');
aClassDivs.forEach(div => {
  // 检查是否存在直接子元素div.bclass
  const hasBClassChild = div.querySelector(':scope > div.bclass');
  if (!hasBClassChild) {
    // 给符合条件的元素添加自定义样式类
    div.classList.add('target-style');
  }
});

随后在CSS中定义.target-style的样式即可。

内容的提问来源于stack exchange，提问作者Epic Programmer