本文讲解如何使用 CSS 选择器（特别是 :not() 与子选择器 > 的组合）准确选取顶层 .ng-invalid 元素，排除嵌套在其他 .ng-invalid 或 .ng-valid 容器内的干扰项，避免误选。
本文讲解如何使用 css 选择器（特别是 `:not()` 与子选择器 `>` 的组合）准确选取顶层 `.ng-invalid` 元素，排除嵌套在其他 `.ng-invalid` 或 `.ng-valid` 容器内的干扰项，避免误选。
在前端表单验证场景中，Angular 等框架常通过动态添加 .ng-invalid 类标记校验失败的表单控件。但当 DOM 结构存在多层嵌套时（如 .ng-invalid 元素被包裹在 .ng-valid 或另一 .ng-invalid 容器内），直接使用 .ng-invalid:not(.no-check) 会匹配到所有符合条件的元素——包括深层嵌套的子项，导致 document.querySelector() 返回意料之外的首个匹配节点（如示例中的 hello 而非目标 hello3）。
根本问题在于原始选择器：
该写法存在两个关键错误：
:not() 不支持逗号分隔多个选择器（not(.no-check, .ng-invalid *) 是非法语法，浏览器会忽略整个 :not() 表达式）；
.ng-invalid * 是后代选择器，无法用于 :not() 内部（CSS 规范禁止在 :not() 中使用包含关系的选择器，仅允许简单选择器如类名、属性等）。
✅ 正确解法是
利用 DOM 层级关系，结合直接子选择器 > 限定作用域
。假设所有待筛选的顶层无效控件均位于一个明确容器（如 .container）下，可改写为：
立即学习
“
前端免费学习笔记（深入）
”；
对应 HTML 结构需确保目标元素是容器的
直接子元素
：
⚠️ 注意事项：
若无法添加 .container 类，可改用更通用的上下文选择器，例如 body > .ng-invalid:not(.no-check)（适用于顶层 ），但需确保结构稳定；
:not(.no-check) 仅排除含 .no-check 类的元素，若需同时排除 .ng-valid 容器内的子项，必须依赖层级限制（>），而非尝试在 :not() 中写复杂逻辑；
现代浏览器均支持 :not() 中的简单选择器，但请避免使用 :not(div .ng-invalid) 等非法后代语法，可用 JavaScript 后过滤作为备选方案：
总结：精准定位非嵌套无效元素的关键，在于
用结构约束替代逻辑排除
——优先使用 > 明确父子关系，配合 :not() 进行简单类名过滤，既符合 CSS 规范，又具备良好可读性与执行效率。
.ng-invalid:not(.no-check, .ng-invalid *)const invalidInput = document.querySelector('.container > .ng-invalid:not(.no-check)');
console.log(invalidInput?.name); // 输出 "hello3"
const candidates = document.querySelectorAll('.ng-invalid:not(.no-check)');
const topmost = Array.from(candidates).find(el =>
!el.parentElement?.matches('.ng-invalid, .ng-valid')
);