一、CSS选择器权重计算机制
行内样式（!important）：权重值1000000
ID选择器（#id）：权重值100
类选择器（.class）：权重值10
标签选择器（div）：权重值1
遗传性选择器（body>div）继承权重值0.1
二、选择器嵌套层级与权重叠加
元素嵌套深度直接影响权重计算：
三、!important关键字使用规范
p { color: #666; }
em { color: #333 !important; }
最佳实践建议：
仅作用于影响用户体验的核心样式
避免在继承链中使用（如body em !important）
优先通过选择器特异性解决冲突
四、常见样式冲突解决方案
层级冲突处理
#main { background: #fff; }
选择器特异性优化
/* 低特异性选择器 */
div { margin: 10px; }
/* 高特异性选择器 */
#content .post { margin: 0; }
优先使用ID+类组合提升特异性
嵌套选择器技巧
通过精确嵌套确保高特异性选择器生效
五、动态样式权重计算
// 动态添加样式
观点汇总
CSS选择器权重体系是前端样式控制的基石，掌握以下核心要点：
行内样式权重最高但应尽量避免
ID选择器特异性优于类选择器
嵌套选择器可提升特异性
!important使用需谨慎
动态样式需遵循相同权重规则
常见问题解答
Q1：如何快速判断样式冲突优先级
Q2：子元素样式覆盖父元素如何解决
A：使用高特异性选择器或调整父元素样式
Q3：!important是否适用于继承属性
A：不建议，可通过调整父元素样式间接实现
Q4：如何优化大量类选择器的特异性
A：优先使用ID+类组合，避免单一类选择器
Q5：动态添加的样式权重如何
A：与静态样式相同，遵循标准权重计算规则
Q6：嵌套选择器最佳嵌套深度
A：建议不超过3层，保持代码可读性
Q7：如何避免选择器特异性过高
A：合理使用通配符和通用选择器
Q8：移动端样式优先级调整技巧
A：通过媒体查询配合特异性优化适配不同设备
