CSS 选择器和它们的优先级

CSS 选择器和它们的优先级是前端开发中至关重要的概念。以下是主要的CSS选择器及它们的优先级规则：

选择器类型

1. 元素选择器：选中所有指定的HTML元素。

   p { color: blue; }
   

2. 类选择器：选中所有包含指定类的元素。

   .example { color: green; }
   

3. ID选择器：选中具有指定ID的元素。

   #unique { color: red; }
   

4. 属性选择器：选中具有指定属性的元素。

   [type="text"] { background-color: yellow; }
   

5. 伪类选择器：选中元素的特定状态。

   a:hover { color: orange; }
   

6. 伪元素选择器：选中元素的特定部分。

   p::first-line { font-weight: bold; }
   

7. 组合选择器：结合多个选择器。

   div > p { margin: 10px; }  /* 子选择器 */
   div + p { margin: 10px; }  /* 相邻兄弟选择器 */
   div ~ p { margin: 10px; }  /* 通用兄弟选择器 */
   

选择器优先级

CSS优先级规则决定了当多个选择器作用于同一个元素时，哪些样式会生效。优先级规则如下：

1. 内联样式：写在HTML元素内的样式（优先级最高）。

   <h1 style="color: pink;">标题</h1>
   

2. ID选择器：优先级为100。

   #header { color: blue; }
   

3. 类选择器、伪类选择器、属性选择器：优先级为10。

   .container { color: green; }
   a:hover { color: orange; }
   [type="text"] { color: yellow; }
   

4. 元素选择器、伪元素选择器：优先级为1。

   p { color: red; }
   p::first-line { font-style: italic; }
   

5. 通配选择器、组合选择器、关系选择器：优先级为0。

   * { margin: 0; }
   div > p { padding: 10px; }
   

注意： 如果多个选择器具有相同的优先级，最后定义的选择器将会生效。

优先级计算示例

假设我们有以下样式：

/* 优先级：1 */
body { color: black; }
/* 优先级：10 */
.container { color: green; }
/* 优先级：100 */
#header { color: blue; }
/* 内联样式 */
<h1 style="color: pink;">标题</h1>

优先级比较：

• body { color: black; }：1
• .container { color: green; }：10
• #header { color: blue; }：100
• 内联样式：1000（最高优先级）