id选择器优先级高于class，因特异性值更高（如#header .title为110，.title为10），故前者样式生效；覆盖时可用更高特异性选择器（如组合id或添加父级）、相同结构后置规则，或临时用!important；建议少用id设样式，多用class实现可复用、易维护的系统，遵循BEM等规范提升语义化。

当CSS中id选择器与class选择器发生样式冲突时，实际上并不存在真正的“优先级冲突”，因为id选择器的优先级本身就高于class。浏览器会根据选择器的特异性（specificity）来决定应用哪个样式。

理解CSS优先级计算

浏览器通过计算选择器的特异性值来判断哪个规则更优先。特异性由四部分组成（从高到低）：

• 内联样式（style属性） - 权重最高
• ID选择器 - 每个id加100分
• 类、属性选择器、伪类 - 每个class加10分
• 元素选择器、伪元素 - 每个元素加1分

举例：

#header .title { color: red; }   /* 特异性：100 + 10 = 110 */
.title { color: blue; }          /* 特异性：10 */

即使.title写在后面，红色仍会生效，因为前面的选择器更具体。

如何覆盖高优先级的ID样式

如果你需要覆盖一个id定义的样式，有几种可靠方式：

• 使用更高特异性的选择器：组合多个id或添加父级限制
• 使用相同或更高的选择器结构：比如也用id选择器，并确保它在CSS文件中后出现
• 避免直接依赖!important，但在紧急调试时可临时使用

推荐做法：

/* 原始规则 */
#nav .active { color: white; }
/ 更高特异性覆盖 /
nav .sidebar .active { color: black; }
/ 或者 /
body #nav .active { color: black; }

最佳实践建议

为避免维护困难：

• 尽量减少使用id来设置样式，id更适合JavaScript操作
• 多用class构建可复用的样式系统
• 如果必须用id控制样式，注意其强绑定性
• 利用BEM等命名规范提升class的语义和控制力

基本上就这些。关键在于理解特异性机制，合理组织选择器结构，而不是强行用!important解决问题。