CSS 权重（优先级规则）

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

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

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

<p style="color: green;">这个文字是绿色的（内联样式）</p><style>p { color: red; } /* 不会生效 */#special { color: blue; } /* 不会生效 */
</style>

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

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

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

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

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

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

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

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

综合

/* 权重: 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; /* 不会生效 */
}