CSS 权重（优先级规则）

Async Cipher2025-09-13 1:32

（1）!important声明 - 最高优先级

css 复制代码

p {
  color: blue !important; /* 最高优先级，即使有其他冲突规则 */
}
.text {
  color: red;
}

（2）内联样式 - 权重值1000

css 复制代码

<p style="color: green;">这个文字是绿色的（内联样式）</p>

<style>
  p { color: red; } /* 不会生效 */
  #special { color: blue; } /* 不会生效 */
</style>

（3）ID选择器 - 权重值100

css 复制代码

#header {
  color: purple; /* ID选择器 */
}
.header {
  color: gray; /* 类选择器 - 优先级较低 */
}

（4）类选择器/属性选择器/伪类选择器 - 权重值10

css 复制代码

.container { /* 类选择器 */
  background: lightblue;
}
input[type="text"] { /* 属性选择器 */
  border: 2px solid red;
}
a:hover { /* 伪类选择器 */
  color: orange;
}
div { /* 元素选择器 - 优先级较低 */
  background: white;
}

（5）元素选择器/伪元素选择器 - 权重值1

css 复制代码

p { /* 元素选择器 */
  font-size: 16px;
}
p::first-letter { /* 伪元素选择器 */
  font-size: 24px;
}

（6）通用选择器/关系选择器 - 权重值0

css 复制代码

* { /* 通用选择器 - 优先级最低 */
  margin: 0;
  padding: 0;
}
div > p { /* 关系选择器 - 优先级与单独p元素相同 */
  color: darkgreen;
}

综合

css 复制代码

/* 权重: 1个ID(100) + 1个类(10) + 1个元素(1) = 111 */
#content .article p {
  color: navy;
}

/* 权重: 2个类(10+10=20) + 1个元素(1) = 21 */
.container .text p {
  color: red; /* 不会生效，因为111 > 21 */
}

/* 权重: 1个元素(1) */
p {
  color: green; /* 不会生效 */
}