DevTools Styles面板中灰色标注“invalid”的规则即为实际失效的CSS，原因包括浏览器不支持、选择器语法错误或伪类未注册；需逐条检查并结合@supports selector()精确检测新选择器支持度。
用 DevTools 的 “invalid” 提示直接定位失效规则
浏览器开发者工具的 Styles 面板里，灰色显示并标注 invalid 的属性，就是最真实的兼容性信号——它不是猜测，而是渲染引擎当场拒绝解析的结果。别依赖 caniuse.com 的“支持 ✅”标记，有些属性（比如 color-mix()）在旧版 Chromium 里语法合法但语义不识别，DevTools 就会静默标灰。
- 打开目标页面 → 右键元素 → Inspect → 切到 Styles 面板
- 逐条检查你写的复杂选择器（如
:has(.item > [data-active])或[role="button"][aria-pressed="true"]::before）是否被整条划掉 - 点开
invalid提示，看具体原因：Not supported in this browser是真不支持；Invalid selector是语法错（比如:has()里用了不被允许的伪类）；Unknown pseudo-class表示该伪类根本未注册
@supports 检测不能只包属性名，必须带完整声明
写 @supports (display: grid) 没问题，但对函数型选择器或新语法，漏掉参数等于白检测。例如 @supports (selector(:has(*))) 是无效写法，浏览器根本不认识 selector() 这个特性名；而 @supports selector(:has(> .trigger)) 才是正确入口（注意没有括号包裹整个表达式）。
-
selector()是唯一能检测选择器支持度的机制，仅 Chrome 119+、Firefox 120+、Safari 17.4+ 支持 - 要验证
:is()或:where()，必须写成@supports selector(:is(div, span))，不能简化为@supports (selector: :is) - 对
:has()，建议拆成两级检测：先@supports selector(:has(*))看基础支持，再用具体结构（如:has(> button)）实测是否触发渲染
HTML 空白节点会让 :empty 和 :has() 判断失准
你以为 section:not(:empty) 能稳稳判断“有内容”，但实际中 <section>\n <p>ok</p>\n</section> 因换行缩进生成了文本节点，:not(:empty) 会匹配；而 <section><p>ok</p></section>（无空白）才真正符合预期。同样，:has(p) 在含空格的父容器里可能意外命中，也可能因 parser 差异在 Safari 中跳过。
- 模板阶段就压缩 HTML（如 Vite 的
build.minify: 'terser'或 Webpack 的html-webpack-plugin插件配置minify: { collapseWhitespace: true }） - 避免在 JS 动态插入时拼接带换行的字符串：
el.innerHTML = `<div>\n <span>text</span>\n</div>`→ 改用el.insertAdjacentHTML('beforeend', '<div><span>text</span></div>') - 若必须保留格式，改用 JS 判断：
el.children.length > 0 || Array.from(el.childNodes).some(n => n.nodeType === Node.ELEMENT_NODE)
框架生成的类名和 Shadow DOM 会让 CSS 路径完全失效
React/Vue 的 CSS Modules、Emotion 的哈希类名、Web Components 的 Shadow DOM，本质都是把选择器运行时隔离。你在全局 CSS 里写的 .user-card__header，实际 DOM 里可能是 user-card__header_jk3f2 或根本不在主文档树里——此时任何外部选择器都查不到。
立即学习“前端免费学习笔记（深入）”；
- 对 CSS Modules，用
:global(.external-class) .local-class显式穿透，而不是硬写.user-card__header .title - 对 Shadow DOM，无法用纯 CSS 从外层选中内部元素，必须用
::part()（需组件显式暴露）或::slotted()，否则只能靠 JSshadowRoot.querySelector() - 检查 Elements 面板里目标元素是否被
<#shadow-root>包裹，或者 class 名末尾带随机哈希串（如button_abc123）
:has() 在部分 Safari 版本里解析成功但不触发样式重绘，或者 [data-id^="item"] 因大小写敏感在 Firefox 里漏匹配。动手前，先看 DevTools 里那条灰线。 
