CSS选择器20种精准定位方法解析

通过精准选择器组合，轻松掌控页面元素样式定位。

一、基础定位选择器

1. 元素选择器
   p { color: red; }
   直接选取HTML元素，适合全局样式设置
2. 类选择器
   .btn { background: blue; }
   复用性最强，通过class属性批量控制元素
3. ID选择器
   #header { height: 60px; }
   唯一性定位，适用于页面关键模块
4. 通配符选择器
   * { margin: 0; }
   全元素匹配，慎用避免性能损耗

二、关系组合选择器

5. 后代选择器
   nav a { color: white; }
   跨层级匹配嵌套元素
6. 子选择器
   ul > li { padding: 8px; }
   精准锁定直系子元素
7. 相邻兄弟选择器
   h2 + p { font-size: 14px; }
   选取紧邻的下一个兄弟元素
8. 通用兄弟选择器
   h2 \~ p { color: #666; }
   匹配后续所有同级元素

三、属性筛选选择器

9. 属性存在检测
   [disabled] { cursor: not-allowed; }
   检测元素是否包含某属性
10. 精准值匹配
    [type="email"] { border: 1px solid blue; }
    完全匹配属性值
11. 模糊匹配三剑客

• [class*="icon"] 包含特定字符
• [href^="https"] 开头匹配
• [src$=".jpg"] 结尾匹配

四、智能伪类选择器

12. 状态响应式
    :hover、:focus、:checked
    实时响应交互状态变化
13. 结构定位器
    :first-child、:nth-child(odd)、:empty
    智能识别元素位置特征
14. 表单验证器
    :valid、:invalid、:required
    自动捕获表单验证状态

五、虚拟元素创建

15. 内容修饰伪元素
    ::before、::after、::first-line
    创建虚拟元素修饰内容
    示例：.price::before { content: "¥" }

六、优先级决胜规则

当样式冲突时，按权重排序：
!important > 行内样式 > ID > 类/属性/伪类 > 元素 > 通配符