id选择器优先级更高，权重为100；类选择器权重为10。css优先级按a-b-c三元组机械计分：id个数（a）、类/属性/伪类个数（b）、标签/伪元素个数（c），从左到右逐位比较大小。
ID选择器优先级更高，权重是100；类选择器权重是10。这不是“谁更常用”的问题，而是浏览器计算样式时硬性执行的数值规则——哪怕你写十个.btn连用，也压不过一个#submit。
为什么#header总能覆盖.header？看权重分怎么算
CSS优先级不是靠“写在后面”或“嵌套深”决定的，而是按选择器类型数量机械计分：ID个数（a）、类/属性/伪类个数（b）、标签/伪元素个数（c），组成 a-b-c 三元组，从左到右逐位比大小。
所以：
-
#nav .item是 1-1-0（1个ID + 1个类） -
.nav .item .active是 0-3-0（3个类） - 前者胜出，因为 a=1 > a=0
- 就算你写
.nav .item .active .is-hovered .has-icon（0-5-0），依然输给#nav（1-0-0）
明明写了.btn:hover，为什么颜色没变？
常见现象：你给按钮加了.btn类并写了.btn:hover { color: red; }，但鼠标移上去还是蓝的。大概率是某个父容器用了#page-wrapper，而它内部定义了color: blue;——这个 ID 选择器的权重（100）直接碾压了你的类+伪类组合（10+10=20）。
调试时别急着加!important，先查 DOM 上有没有 ID 被无意命中。用浏览器开发者工具的“Computed”面板点开“color”，看哪条规则被划掉、被哪条覆盖，往往一眼就能定位到那个藏在 layout.css 里的#main。
JS里用document.getElementById还是document.querySelector？
优先用document.querySelector('.modal')，而不是document.getElementById('modal')。
原因很实际：
- ID 在现代框架（React/Vue）中极易重复，服务端渲染时可能生成多个同名 ID，导致
getElementById只返回第一个，后续逻辑全断 -
querySelector支持类、属性、数据属性等任意合法选择器，更灵活；且类名重复是合法的，匹配结果符合预期 - 如果真要绑定表单可访问性（比如
label[for="email"]），保留 ID 是必须的，但那属于语义和 ARIA 需求，和 CSS 样式无关
真正容易被忽略的点是：权重冲突往往不是发生在你写的样式里，而是来自第三方 UI 库、重置样式（reset.css）或框架默认样式——它们喜欢用 ID 或高权重组合“保底”，结果你自己的类选择器在不知情下就被静默压制了。查的时候别只盯自己写的 CSS 文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
