CSS选择器优先级与使用指南
优先级概念 CSS选择器优先级是决定样式应用顺序的权重系统，当多个规则作用于同一元素时，浏览器根据选择器权重决定应用哪个规则。
优先级权重等级（从高到低）
1. !important规则
- 最高优先级，超越所有规则
示例：
color: red !important;
注意：尽量避免滥用，会破坏CSS级联特性
2. 内联样式 -
示例：<p style="color: blue;">内容</p> - 注意：不利于维护和复用
3. ID选择器
示例：#header { background: gray; }
4. 类/属性/伪类选择器
包括： - 类选择器：.btn - 属性选择器：[type="text"] - 伪类选择器：:hover, :nth-child(2)
5. 元素/伪元素选择器
包括： - 元素选择器：p, div - 伪元素选择器：::before, ::after
6. 通配符/关系选择器
包括：
- 通配符：
* - 关系选择器： (后代), >(子元素), +(相邻兄弟), ~(通用兄弟)
实际使用注意事项
1. 避免过度依赖ID选择器 - ID选择器权重高，难以覆盖 - 建议：优先使用类选择器，复用性高且权重适中
2. 谨慎使用!important - 破坏CSS级联规则，难以调试 - 建议：仅在必须覆盖内联样式或第三方库样式时使用
3. 保持选择器简洁 - 过长选择器缺乏灵活性，难以维护 - 建议：使用有意义类名，避免过长嵌套
4. 利用源码顺序 - 权重相同时，后定义样式覆盖先定义样式 - 建议：合理组织CSS文件顺序
5. 理解继承机制 - 继承样式无优先级，直接应用样式会覆盖继承样式 - 示例：父元素设置color:black，子元素设置color:red → 显示红色
6. 善用开发者工具 - 浏览器开发者工具(F12)可显示： - 所有应用规则及优先级 - 被覆盖规则(划掉显示) - 选择器权重值 - 样式来源(文件及行号) ### 7. 注意CSS作用域 - 现代框架(React/Vue等)使用CSS Modules/Scoped CSS - 优先级规则仍然适用，但作用域机制限制样式影响范围 ### 8. 响应式设计优先级 - 媒体查询内样式优先级与普通CSS相同 - 注意：权重相同时，后定义媒体查询规则覆盖先定义规则 - 建议：将小屏幕媒体查询放在大屏幕之后
