三分钟解读CSS权重

前端

2023-10-18 10:57:35

序言

作为网页设计的基础，CSS（层叠样式表）定义了网页元素的外观和布局。理解CSS权重至关重要，因为它决定了在冲突情况下哪条CSS规则优先级更高。

权重机制

CSS权重是一个数字值，表示规则优先级。权重越高，优先级越高。权重由以下因素决定：

内联样式（1000）： 写在元素本身上的样式，优先级最高。
ID选择器（100）： 使用ID属性（#ID）定位特定元素。
类选择器（10）： 使用类属性（.class）定位元素组。
元素选择器（1）： 根据元素名称定位元素。
伪类（1）： 根据元素状态（如：悬停）定位元素。

计算权重

权重是一个复合值，由不同部分相加得到：

特异性值： 基于选择器类型的权重，如上述所示。
重要性： “!important”，权重为100。

权重计算顺序：

从右到左计算特异性值。
相同特异性下，优先级从内联到元素选择器递减。
存在“!important”，则该规则优先级最高。

实例说明

示例 1：

p {
  font-size: 12px; /* 特异性：1 */
}

#content p {
  font-size: 14px; /* 特异性：101 */
}

#content .important-text {
  font-size: 16px; /* 特异性：110 */
}

特异性：#content .important-text > #content p > p
权重：110 > 101 > 1

因此，#content .important-text 样式将覆盖其他样式。

示例 2：

p {
  color: blue; /* 特异性：1 */
}

p:hover {
  color: red; /* 特异性：1 */
}

p.error {
  color: #FF0000; /* 特异性：10 */
}

p:hover.error {
  color: #00FF00; /* 特异性：11 */
}

p:hover.error!important {
  color: #0000FF; /* 特异性：111 */
}

特异性：p:hover.error!important > p:hover.error > p.error > p:hover > p
权重：111 > 11 > 10 > 1 > 1

由于“!important”的存在，p:hover.error!important 样式将优先级最高。