【CSS】CSS 选择器及其优先级

1. 元素选择器：选择特定的HTML元素。优先级较低。

   p {
     /* 样式规则 */
   }
   

2. 类选择器：选择具有特定类名的元素。优先级稍高于元素选择器。

   .example {
     /* 样式规则 */
   }
   

3. ID选择器：选择具有特定ID的唯一元素。优先级更高。

   #header {
     /* 样式规则 */
   }
   

4. 属性选择器：选择具有特定属性的元素。优先级与元素选择器类似。

   [type="text"] {
     /* 样式规则 */
   }
   

5. 伪类选择器：选择处于特定状态的元素，如链接的不同状态。优先级与元素选择器类似。

   a:hover {
     /* 样式规则 */
   }
   

6. 伪元素选择器：选择元素的特定部分，例如元素的第一个字母或最后一个子元素。优先级与元素选择器类似。

   p::first-line {
     /* 样式规则 */
   }
   

7. 组合选择器：结合多个选择器，以选择满足多个条件的元素。组合选择器的优先级由组成部分的选择器的优先级决定。

   p.example {
     /* 样式规则 */
   }
   

CSS选择器的优先级是由多个因素组合而成的，用于确定在多个样式规则应用到同一元素时哪个规则会生效。优先级从高到低：

1. !important：优先级最高！

2. 内联样式（Inline Styles）：应用于元素的内联样式，通过元素的style属性定义。内联样式具有最高的优先级。

   示例：

   <p style="color: blue;">这是内联样式的文本。</p>
   

   优先级：(1, 0, 0, 0)

3. ID选择器（ID Selectors）：通过元素的唯一ID选择元素。每个ID选择器在文档中只能出现一次。

   示例：

   #header {
     color: red;
   }
   

   优先级：(0, 1, 0, 0)

4. 类选择器、属性选择器和伪类选择器（Class Selectors, Attribute Selectors, Pseudo-Class Selectors）：包括类选择器（.class）、属性选择器（[attribute]）和伪类选择器（:pseudo-class）。

   示例：

   .example {
     color: green;
   }
   
   [type="text"] {
     border: 1px solid black;
   }
   
   a:hover {
     text-decoration: underline;
   }
   

   优先级：(0, 0, 1, 0)

5. 元素选择器和伪元素选择器（Type Selectors, Pseudo-Element Selectors）：包括元素选择器（element）和伪元素选择器（::pseudo-element）。

   示例：

   p {
     font-size: 16px;
   }
   
   p::first-line {
     font-weight: bold;
   }
   

   优先级：(0, 0, 0, 1)

如果有多个规则应用到同一元素，浏览器会根据这个优先级顺序决定应用哪个规则。如果多个规则具有相同的优先级，那么根据出现在样式表中的顺序来决定哪个规则应用。

需要注意的是，优先级是基于权重的计算，每个等级的权重分别为 (1000^3)、(1000^2)、1000 和 1。选择器组合是基于权重规则进行加法运算。

区别伪类和伪元素：伪类不产⽣新对象，伪元素会产⽣新对象，它们都不存在dom树中，伪类只是该选择器的元素的不同状态。