用devtools查specificity四元组需悬停属性看tooltip，确认是否显示“specificity is lower than another rule”及具体值（如0,0,2,1），而非仅依赖删除线；不同浏览器对伪类（:has/:is/:where）和@import解析存在差异，需结合computed面板source链接验证生效来源。
用 DevTools 查 specificity 四元组，别只看有没有划掉
样式被覆盖但没显示删除线，不等于没被压；有些浏览器（比如 Safari 16+）对 !important 的解析更严格，或对某些伪类（如 :has()）支持不全，导致整条规则被静默忽略。打开 Chrome/Firefox 的 Styles 面板，选中元素后，鼠标悬停在某条属性上，看 tooltip 是否显示 specificity is lower than another rule 及其四元组值（如 0,0,2,1）。注意：这个值是浏览器实时计算的，不是你“感觉”它该是多少。
对比不同浏览器的 computed 样式来源路径
同一段 CSS，在 Chrome 里生效、Firefox 里失效，大概率不是优先级问题，而是选择器本身不被识别——比如用了 :focus-visible 但目标浏览器未实现，或 [data-id="123"] 中的引号在旧版 Edge 里触发解析异常。打开各浏览器的 Computed 面板，展开每条属性，点开「source」链接，确认生效样式是否来自你预期的文件和行号。常见差异点：
-
:is(), :where(), :has()在 Safari 15.4 之前基本不可用 -
rem单位在 iOS Safari 9.3 以下需 fallback 为px -
gap在 Flex 布局中，IE 完全不支持，部分安卓 WebView 仅支持 Grid 中的gap
避免用 ID 或嵌套过深的选择器做跨浏览器兜底
ID 选择器（#header）权重高，但在 Shadow DOM 或 Web Components 场景下无法穿透，且多数现代框架（React/Vue）默认禁用 ID 作为样式锚点。更稳妥的方式是提升类选择器精准度：
- 把
.card .title改成.card__title（BEM），权重稳定为0,0,1,0 - 用属性选择器兜底：
[data-role="tooltip"]权重 =0,0,1,0，且语义明确、不易被第三方库覆盖 - 慎用
!important：它在所有浏览器中行为一致，但若对方也用了!important，胜负仍由 specificity 决定
检查 CSS 加载顺序与 @import 的实际解析时机
Chrome 和 Firefox 对 @import 的阻塞行为处理不同：Firefox 会等待被 import 的文件下载完成才继续解析后续规则，而 Chrome 更激进地并行加载，可能导致你自定义的高权重规则“后发先至”却意外失效。解决方案很直接：
- 全部改用
<link rel="stylesheet">替代@import - 确保你的 CSS 文件在 HTML 中排在第三方库（如 Bootstrap、Ant Design）之后
- 在 Network 面板里按「waterfall」排序，确认你的 CSS 请求发起时间晚于框架 CSS
真正容易被忽略的是：某些构建工具（如 Vite）在 dev 模式下会注入 HMR style 标签，这些标签的插入顺序不受 HTML 控制，可能随机插到中间，造成权重错乱。上线前务必验证 production 构建产物的 link 顺序。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
