css优先级由选择器的权重决定，权重越高样式越优先。权重计算分为四位：内联样式1,0,0,0，id选择器0,1,0,0，类/属性/伪类选择器0,0,1,0，元素/伪元素0,0,0,1；常见对比如p(0,0,0,1)、.class(0,0,1,0)、#id(0,1,0,0)；权重相同时后写的生效；!important可强制覆盖但应谨慎使用；内联样式优先级最高但应避免滥用；少用id以减少覆盖问题。
CSS选择器的优先级决定了当多个规则作用于同一个元素时，哪一个规则会被应用。很多人在写样式的时候会遇到“为什么我的样式没生效”的问题，其实大多数时候都是优先级的问题。理解CSS选择器的权重计算规则，能帮你更高效地控制样式覆盖顺序。
什么是CSS优先级？
每个CSS选择器都有一个对应的“权重”，浏览器根据这个权重来判断哪个样式应该被最终应用。权重越高，优先级越高。如果两个规则冲突，权重高的那个就会胜出。
优先级是由选择器的类型和数量决定的，不是靠书写顺序或样式表的位置。
立即学习“前端免费学习笔记（深入）”；
权重是如何计算的？
CSS优先级是通过一个四位数（有时简写为三位）来表示的，从高到低分别是：
- 内联样式：1,0,0,0
- ID选择器：0,1,0,0
- 类选择器、属性选择器、伪类：0,0,1,0
- 元素选择器、伪元素：0,0,0,1
- 通用选择器、否定伪类等不影响权重
举个例子：
/* 权重：0,1,1,1 */
#main .content p {
color: red;
}
/* 权重：0,0,1,3 */
div.content p span {
color: blue;
}虽然第二个选择器更长，但它的权重比第一个低，所以第一个规则会生效。
常见选择器的权重对比
下面是一些常见选择器的权重对比，帮助你快速判断谁更高：
-
p→ 0,0,0,1 -
.class→ 0,0,1,0 -
#id→ 0,1,0,0 -
p.class→ 0,0,1,1 -
p#id→ 0,1,0,1 -
div ul li > p→ 0,0,0,4 -
[type="text"]→ 0,0,1,0 -
:hover→ 0,0,1,0 -
::before→ 0,0,0,1
可以看出，只要有一个ID选择器，基本就能压过很多其他组合。这也是为什么我们常说“少用ID写样式”的原因之一。
!important 和内联样式的特殊处理
-
!important是一种强制覆盖机制，但它不属于选择器本身的优先级系统。它更像是一个“作弊手段”。如果你滥用它，后期维护会变得非常困难。 - 内联样式的优先级是最高的（除非遇到带
!important的规则），所以尽量避免使用style="..."，除非确实有需要动态控制样式的情况。
一些实际中需要注意的地方：
- 两个规则权重相同的情况下，后写的那个生效
- 使用
!important要谨慎，只在必要时使用，比如覆盖第三方库的样式 - ID选择器很容易造成样式难以覆盖的问题，建议多用类名代替
基本上就这些。优先级听起来有点复杂，但只要你记住不同选择器的权重级别，并在开发过程中注意检查样式覆盖关系，就可以避免大部分样式冲突问题。
