CSS 选择器的优先级如何计算？

⚡ 速记答案（30 秒）

行内 > ID > class/伪类/属性选择器 > 标签/伪元素 > 通配符。数字模型：inline(1,0,0,0)、id(0,1,0,0)、class(0,0,1,0)、标签(0,0,0,1)。同级比较，大的胜出；相同则后写的覆盖。

📖 详细讲解

标准面试回答（推荐记住）

CSS 选择器优先级可以用四元组数字模型来记忆。行内样式是 1,0,0,0；ID 选择器是 0,1,0,0；类选择器、伪类、属性选择器是 0,0,1,0；标签选择器和伪元素是 0,0,0,1。比较时从左往右，数字大的胜出。如果优先级完全相同，则后写的样式覆盖先写的。!important 可以强制提升优先级，但应该尽量避免使用。

优先级权重

选择器	权重
!important	最高（慎用）
行内 style	1,0,0,0
ID #id	0,1,0,0
class/伪类/属性	0,0,1,0
标签/伪元素	0,0,0,1
通配符 *	0,0,0,0

✅ 面试要点

•记住四元组权重模型
•从左到右比较
•避免滥用 !important

💻 代码示例

优先级计算示例

/* 0,0,0,1 */
p { color: black; }

/* 0,0,1,0 */
.text { color: blue; }

/* 0,0,1,1 */
p.text { color: green; }

/* 0,1,0,0 */
#main { color: red; }

/* 0,1,1,1 - 最高 */
#main p.text { color: purple; }