如何为无特定子元素的元素应用CSS？兼容旧浏览器，允许JS方案

由于旧浏览器不支持CSS的:has()选择器，纯CSS无法直接实现“选择不包含特定子元素的父元素”这类需求，必须借助JavaScript来完成。

为什么你的CSS代码无效 #

你尝试的代码：

div a:not( > .p-Inside-Link){
    display: none;
}

存在两个核心问题：

1. CSS的:not()伪类中不能直接使用子选择器>，语法不符合规范；
2. 就算语法正确，这段代码也只会隐藏符合条件的<a>元素，无法影响外层的<div>——CSS本身没有反向的父选择能力（:has()是例外，但旧浏览器不支持）。

JavaScript解决方案 #

通过遍历元素并检查子元素结构，来控制外层<div>的显示状态：

HTML结构

<!-- 需要隐藏的元素 -->
<div>
  <a class="link"> click me </a>
</div>

<!-- 需要保留的元素 -->
<div>
  <a class="link">
    <p class="p-Inside-Link">click me</p>
  </a>
</div>

JavaScript代码

// 遍历所有div元素
document.querySelectorAll('div').forEach(div => {
  // 找到当前div内的.link元素
  const linkElement = div.querySelector('.link');
  if (linkElement) {
    // 检查.link内是否存在.p-Inside-Link
    const hasTargetChild = linkElement.querySelector('.p-Inside-Link') !== null;
    // 如果不存在目标子元素，隐藏当前div
    if (!hasTargetChild) {
      div.style.display = 'none';
      // 也可以通过添加类名的方式用CSS控制隐藏：
      // div.classList.add('hidden');
    }
  }
});

可选CSS（如果用类名控制）

.hidden {
  display: none;
}

动态场景适配 #

如果页面存在后续动态加载的元素，可以把上述逻辑封装成函数，在元素加载完成后调用：

function filterDivs() {
  document.querySelectorAll('div').forEach(div => {
    const linkElement = div.querySelector('.link');
    if (linkElement) {
      const hasTargetChild = linkElement.querySelector('.p-Inside-Link') !== null;
      div.style.display = hasTargetChild ? 'block' : 'none';
    }
  });
}

// 页面加载完成后执行
window.addEventListener('load', filterDivs);
// 动态元素添加后调用filterDivs()即可

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