CSS选择器问题：如何选中非嵌套的.ng-invalid元素（期望输出hello3）

我使用document.querySelector('.ng-invalid:not(.no-check, .ng-invalid *)')获取元素，期望控制台输出hello3，但未达成预期效果。

相关代码如下：

JavaScript代码：

const invalidInput = document.querySelector('.ng-invalid:not(.no-check, .ng-invalid *)');

console.log(invalidInput.name);

HTML结构：

<div class="ng-valid no-check">
  <div class="ng-invalid">
    <span>(</span>
    <input class="ng-invalid" name="hello" id="hello">
    <span>)</span>
    <input class="ng-invalid" name="hello2" id="hello2">
  </div>
</div>
<br>
<input class="ng-invalid" name="hello3" id="hello3">

问题分析 #

原选择器的逻辑存在两处问题：

1. .ng-invalid:not(.no-check, .ng-invalid *)中的.no-check仅能排除自身带有该类的.ng-invalid元素，但示例中.no-check是父元素的类，无法排除其内部的.ng-invalid元素；
2. .ng-invalid:not(.ng-invalid *)仅排除“作为.ng-invalid元素后代的.ng-invalid元素”，但DOM中第一个符合条件的是name="hello"的input，querySelector会优先返回它，而非目标的hello3。

解决方案 #

方案1：简化选择器直接排除目标范围 #

修改选择器，排除所有被.no-check元素包裹的.ng-invalid元素：

const invalidInput = document.querySelector('.ng-invalid:not(.no-check *)');

该选择器会自动过滤掉.no-check内部的所有.ng-invalid元素，querySelector会返回DOM中第一个符合条件的hello3。

方案2：遍历过滤（兼容旧浏览器） #

如果需要同时确保元素不被其他.ng-invalid元素包裹，可以用遍历筛选的方式：

const allInvalidElements = document.querySelectorAll('.ng-invalid');
const targetElement = Array.from(allInvalidElements).find(el => {
  // 排除.no-check内部的元素
  const inNoCheck = el.closest('.no-check') !== null;
  // 排除被其他.ng-invalid包裹的元素
  const inInvalidParent = el.closest('.ng-invalid') !== el;
  return !inNoCheck && !inInvalidParent;
});

console.log(targetElement.name); // 输出hello3

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