id选择器优先级高于class，因特异性值更高（如#header .title为110，.title为10），故前者样式生效；覆盖时可用更高特异性选择器（如组合id或添加父级）、相同结构后置规则，或临时用!important；建议少用id设样式，多用class实现可复用、易维护的系统，遵循BEM等规范提升语义化。
当CSS中id选择器与class选择器发生样式冲突时，实际上并不存在真正的“优先级冲突”，因为id选择器的优先级本身就高于class。浏览器会根据选择器的特异性（specificity）来决定应用哪个样式。
理解CSS优先级计算
浏览器通过计算选择器的特异性值来判断哪个规则更优先。特异性由四部分组成（从高到低）：
举例：
#header .title { color: red; } /* 特异性：100 + 10 = 110 */
.title { color: blue; } /* 特异性：10 */
即使.title写在后面，红色仍会生效，因为前面的选择器更具体。
如何覆盖高优先级的ID样式
如果你需要覆盖一个id定义的样式，有几种可靠方式：
- 使用更高特异性的选择器：组合多个id或添加父级限制
- 使用相同或更高的选择器结构：比如也用id选择器，并确保它在CSS文件中后出现
- 避免直接依赖!important，但在紧急调试时可临时使用
推荐做法：
/* 原始规则 */
#nav .active { color: white; }
<p>/<em> 更高特异性覆盖 </em>/</p><h1>nav .sidebar .active { color: black; }</h1><p>/<em> 或者 </em>/
body #nav .active { color: black; }</p>
最佳实践建议
为避免维护困难：
- 尽量减少使用id来设置样式，id更适合JavaScript操作
- 多用class构建可复用的样式系统
- 如果必须用id控制样式，注意其强绑定性
- 利用BEM等命名规范提升class的语义和控制力
基本上就这些。关键在于理解特异性机制，合理组织选择器结构，而不是强行用!important解决问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
