前端面试中关于CSS选择器的问题三连：

1.CSS选择器有哪些？

1.优先级怎样？

2.权重如何计算？

多数人的回答是这样的：

CSS选择器的优先级遵循特定的规则，这些规则基于选择器的类型和特定性。一般来说，优先级从高到低依次是：行内样式、id选择器、class选择器、标签选择器。然而，使用！important可以提升样式的优先级，使其高于行内样式。权重的计算通常依次为1000、100、10、1，而！important的优先级被视为正无穷

实际上，CSS权重的计算采用的是256进制，而不是我们常见的十进制。这意味着，权重的值并非简单的数字，而是基于256进制的数。例如，通配符的权重为0，伪元素的权重为1，它们之间相差了255个单位。这种计算方式使得权重的计算更加精细，也使得！important在提升优先级时具有更大的影响

CSS选择器类型

样式类型

行内样式：p {color: red;}

内联样式：

外部样式：或@import引入

选择器类型

id选择器、class选择器、属性选择器、*、伪类选择器、伪元素、后代选择器、子类选择器、兄弟选择器等

权重计算规则

- 第一优先级：!important；会覆盖页面内任何位置的元素样式

- 1.内联样式，如：style="color: green"，权值为1000

- 2.ID选择器，如：#app，权值为：0100

- 3.类、伪类、属性选择器，如.foo, :first-child, div[class="foo"]，权值为：0010

- 4.标签、伪元素选择器，如div::first-line，权值为：0001

- 5.通配符、子类选择器、兄弟选择器，如：*, >, +，权值为：0000

- 6.继承的样式权值最低

比较规则

- 1.1000 > 0100，我们通常从左向右逐个比较。首先比较行内样式和内部样式的权重，如果它们相等，那么再比较id选择器的权重，以此类推

- 2.在面试中，当被问到CSS样式的优先级比较时，答案通常是：行内样式、内部样式和外部样式的优先级比较遵循以下规则：行内样式具有最高的优先级，其次是id选择器，然后是class选择器，最后是元素（标签）选择器。然而，需要注意的是，这个规则可能会被！important声明所改变，!important声明可以提升样式的优先级，使其高于行内样式

- 3.当多个样式具有相同的权重时，位于后面的样式会覆盖前面的样式。这是因为在CSS中，样式的解析是从上到下的，如果多个样式具有相同的权重，那么最后定义的样式将会被应用。这也是为什么在CSS中，我们通常将更具体的样式放在前面，以确保它们能够覆盖更一般的样式。

- 4.尽管通配符、子选择器和兄弟选择器的权重较低，为0000，但是它们仍然优先于继承的样式。

如图2

样式呈现的效果如图3

完整代码如图4

#抖音创作者大会##html好学吗# #前端好不好学# #前端好学吗# #不愧为前端# #前端# #前端学习圈#