ID选择器优先级高于class选择器，因CSS优先级权重中ID为(0,1,0,0)、class为(0,0,1,0)，前者第二位数值更大，故优先；例如#nav{color:blue}会覆盖.nav{color:red}，体现id对单一元素的精确控制与语义重要性。
id选择器
的优先级比class选择器高，是因为CSS优先级的计算规则中，不同选择器类型具有不同的权重值。
优先级权重分配
CSS通过一组数值来衡量选择器的优先级，通常表示为（内联样式, ID, 类/属性/伪类, 标签/
伪元素
）四个层级：
ID选择器
（如 #header）：权重为 (0,1,0,0)
类选择器
（如 .btn）：权重为 (0,0,1,0)
当比较两个规则时，
浏览器
从左到右逐位比较这些数值。由于id在第二位有1，而class是0，因此id选择器胜出。
实际例子说明
如果这两个规则作用于同一个元素，文字颜色会是蓝色，因为id选择器优先级更高。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
立即学习
“
前端免费学习笔记（深入）
”；
设计初衷：唯一性与精确性
id在HTML中应是唯一的，代表页面中特定的一个元素；而class可用于多个元素，表达共性样式。正因为id更精确地定位单一元素，赋予它更高的优先级有助于开发者更可靠地控制关键样式。
基本上就这些——优先级不是随意定的，而是基于选择器的语义重要性和匹配精度决定的。
#nav { color: blue; } /* 权重: (0,1,0,0) */
.nav { color: red; } /* 权重: (0,0,1,0) */