{site_name}

{site_name}

🌜 搜索

CSS 特异性(specificity)是用于确定当多个 CSS 规则应用到同一元素时,哪条规则将优先使用的计算规则

前端 𝄐 0
css特性描述,css 新特性,css特效属性,css6新特性,css三大特性举例,css特性有哪些
CSS 特异性(specificity)是用于确定当多个 CSS 规则应用到同一元素时,哪条规则将优先使用的计算规则。

CSS 特异性是基于选择器的组合来计算的,每个选择器都有一个特定的权重值。权重越高的规则将优先应用于元素。

以下是计算 CSS 特异性的规则:
- 每个元素选择器、伪元素选择器和属性选择器都有权重 0,0,1,0。
- 每个类选择器、伪类选择器和属性选择器都有权重 0,0,1,0。
- 每个 ID 选择器都有权重 0,1,0,0。
- 对于通配符选择器、关系选择器和否定伪类选择器,它们的特异性为 0,0,0,0。

例如,以下是两个规则:


/* Rule 1 */
p {
color: blue;
}

/* Rule 2 */
#example p {
color: red;
}


第一个规则适用于所有段落元素,因此它的特异性为 0,0,0,1。第二个规则只适用于 ID 为 "example" 的元素内的段落元素,因此它的特异性为 0,1,0,1。因此,在这种情况下,第二个规则将覆盖第一个规则,并且 ID 为 "example" 的段落元素将使用红色文本颜色。