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

以下是20种CSS选择器的详细解析，帮助您精准定位页面元素，按使用频率和功能分类整理：

一、基础选择器

1. 元素选择器

   p { color: red; }
   

   • 匹配所有指定HTML元素
   • 适用场景：全局样式设置

2. 类选择器

   .btn-primary { background: blue; }
   

   • 通过class属性匹配元素
   • 优势：可复用性强

3. ID选择器

   #header { height: 60px; }
   

   • 通过唯一id属性匹配元素
   • 注意：页面中ID应唯一

4. 通配符选择器

   * { margin: 0; }
   

   • 匹配所有元素
   • 慎用：可能影响性能

二、组合选择器

5. 后代选择器

   div p { line-height: 1.5; }
   

   • 匹配嵌套在div内的所有层级p元素

6. 子元素选择器

   ul > li { list-style: none; }
   

   • 仅匹配直接子元素

7. 相邻兄弟选择器

   h2 + p { margin-top: 10px; }
   

   • 匹配紧跟在h2后的第一个p元素

8. 通用兄弟选择器

   h2 ~ p { color: #666; }
   

   • 匹配h2之后的所有同级p元素

三、属性选择器

9. 存在属性选择器

   [disabled] { opacity: 0.5; }
   

   • 匹配具有指定属性的元素

10. 精确匹配选择器

    [type="email"] { border-color: blue; }
    

    • 属性值完全匹配时生效

11. 包含子串选择器

    [class*="btn-"] { padding: 8px; }
    

    • 属性值包含指定子串

12. 开头匹配选择器

    [href^="https"]::after { content: "