WebStorm不显示CSS选择器优先级数值，仅提供语法高亮、跳转定义等基础功能；真正可靠的优先级查看方式是浏览器开发者工具的Styles面板悬停提示，显示如specificity: 0,0,2,1。
在WebStorm里看不到CSS选择器优先级数值
WebStorm本身不显示选择器的specificity（权重值），也不会在编辑器里标注「这个.header .nav a是0,0,2,1」。它没有内置的优先级计算器或实时权重提示面板——这点和浏览器开发者工具完全不同。
你能在WebStorm里获得的，仅限于语法高亮、结构折叠、跳转定义、以及错误/警告提示（比如未闭合的花括号）。它不会解析并比较两个.btn和#main .btn.active谁更重。
- 别指望靠WebStorm的“颜色深浅”或“加粗”判断优先级
- 别在设置里翻找「CSS specificity preview」这类不存在的选项
- WebStorm的「Inspect Code」或「CSS Linter」也不会报出「该规则可能被覆盖」类的提示
真正能看优先级的地方是浏览器开发者工具
所有现代浏览器（Chrome/Firefox/Edge）的开发者工具都原生支持优先级可视化，这是唯一可靠、实时、可验证的方式。
操作路径很直接：右键页面元素 → 「检查」→ 切到「Styles」面板 → 找到对应CSS规则 → 把鼠标悬停在选择器上（例如.card:hover），就会弹出一个tooltip，明确显示类似specificity: 0,0,2,1的数值。
立即学习“前端免费学习笔记（深入）”；
- 画删除线的样式 = 被更高优先级规则覆盖了
- 点击右侧的文件名链接，能直接跳转到源码位置（即使来自
.scss或构建后的bundle.css） - 在「Computed」面板里能看到最终生效的每个属性值，点开就能追溯到是哪条规则贡献的
WebStorm能帮你间接降低优先级问题发生概率
虽然它不显示权重，但通过合理配置，可以减少写出冲突选择器的机会。
比如开启「CSS属性排序」后，WebStorm会把color、font-size等按字母序排列，让同类规则更易横向对比；再配合「SCSS嵌套自动展开」和「快速重构重命名类名」，能避免手写div div div .content p span这种高权重又难维护的选择器。
- 设置路径：
Settings → Editor → Code Style → CSS/SCSS → Arrangement，勾选「Sort properties」 - 写复合选择器前，先问一句：这个
.sidebar .item.active真比.item--active更必要吗？ - 用
:is()或:where()替代冗长链式选择器时，WebStorm能正常语法识别，但不会提醒你:where()权重为0——这点得自己记牢
遇到优先级混乱时，别在WebStorm里硬猜
当改了样式却没反应，或者两个!important打架，最有效的动作不是反复刷新WebStorm预览，而是立刻打开浏览器DevTools，定位到那个DOM节点，逐条关闭/启用右侧样式规则，观察变化。
这时候你会发现，所谓「优先级」根本不是抽象概念——它就体现在那条被划掉的background-color: red上，和悬停时弹出的那个四元组数字里。WebStorm负责写得清楚，浏览器负责说得明白，两者分工明确，混用反而耽误事。
