Css选择器以及优先级

一、CSS 选择器类型（常用）

1. 通配选择器 *

   * { margin: 0; } /* 匹配所有元素 */
   

2. 元素选择器 tag

   div { color: red; } /* 匹配所有 div 元素 */
   

3. 类选择器 .class

   .container { width: 100px; } /* 匹配 class="container" 的元素 */
   

4. ID 选择器 #id

   #header { background: blue; } /* 匹配 id="header" 的元素 */
   

5. 属性选择器 [attr]

   [type="text"] { border: 1px solid #ccc; } /* 匹配 type="text" 的元素 */
   

6. 伪类选择器 :pseudo-class

   a:hover { color: green; } /* 鼠标悬停时的链接 */
   

7. 伪元素选择器 ::pseudo-element

   p::first-line { font-weight: bold; } /* 段落的第一行 */
   

8. 后代选择器 A B

   .menu li { list-style: none; } /* .menu 下的所有 li */
   

9. 子选择器 A > B

   ul > li { padding: 5px; } /* 直接子元素 li */
   

10. 相邻兄弟选择器 A + B

    h1 + p { margin-top: 0; } /* 紧接在 h1 后的第一个 p */
    

二、优先级计算规则（从高到低）

优先级通过权重计算，格式：(内联, ID, 类, 元素)

1. !important（最高优先级）

   p { color: red !important; } /* 覆盖其他所有声明 */
   

2. 内联样式 (1,0,0,0)

   <div style="color: blue;">优先级高于外部 CSS</div>
   

3. ID 选择器 (0,1,0,0)

   #header { ... } /* 权重 100 */
   

4. 类/属性/伪类选择器 (0,0,1,0)

   .class, [type], :hover { ... } /* 权重各 10 */
   

5. 元素/伪元素选择器 (0,0,0,1)

   div, ::before { ... } /* 权重各 1 */
   

三、优先级比较示例

/* 权重 (0,0,1,1) = 11 */
div.container { color: red; }

/* 权重 (0,0,2,0) = 20 */
.container.active { color: blue; }

/* 权重 (0,1,0,0) = 100 */
#header { color: green; }

/* 最终生效：绿色（ID 选择器优先级最高） */

四、记忆口诀

1. !important > 内联样式 > ID > 类/伪类/属性 > 元素 > 通配符
2. 权重相加不进位（如 11 个类选择器 (110) < 1 个 ID 选择器 (100) ❌）
3. 优先级相同时，后定义的样式生效

五、面试常见问题

1. 问：.class1.class2 和 #id 哪个优先级高？
   答：#id 优先级更高（100 > 20）

2. 问：如何覆盖 !important？
   答：在相同属性后使用 !important，且选择器优先级更高

重点记住 ID > 类 > 元素 的核心逻辑，以及权重计算不进制的特点！