-
元素选择器:选择特定的HTML元素。优先级较低。
p { /* 样式规则 */ }
-
类选择器:选择具有特定类名的元素。优先级稍高于元素选择器。
.example { /* 样式规则 */ }
-
ID选择器:选择具有特定ID的唯一元素。优先级更高。
#header { /* 样式规则 */ }
-
属性选择器:选择具有特定属性的元素。优先级与元素选择器类似。
[type="text"] { /* 样式规则 */ }
-
伪类选择器:选择处于特定状态的元素,如链接的不同状态。优先级与元素选择器类似。
a:hover { /* 样式规则 */ }
-
伪元素选择器:选择元素的特定部分,例如元素的第一个字母或最后一个子元素。优先级与元素选择器类似。
p::first-line { /* 样式规则 */ }
-
组合选择器:结合多个选择器,以选择满足多个条件的元素。组合选择器的优先级由组成部分的选择器的优先级决定。
p.example { /* 样式规则 */ }
CSS选择器的优先级是由多个因素组合而成的,用于确定在多个样式规则应用到同一元素时哪个规则会生效。优先级从高到低:
-
!important:优先级最高!
-
内联样式(Inline Styles):应用于元素的内联样式,通过元素的
style
属性定义。内联样式具有最高的优先级。示例:
<p style="color: blue;">这是内联样式的文本。</p>
优先级:(1, 0, 0, 0)
-
ID选择器(ID Selectors):通过元素的唯一ID选择元素。每个ID选择器在文档中只能出现一次。
示例:
#header { color: red; }
优先级:(0, 1, 0, 0)
-
类选择器、属性选择器和伪类选择器(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)
-
元素选择器和伪元素选择器(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树中,伪类只是该选择器的元素的不同状态。