如何计算和解释 CSS 选择器特异性分数

了解计算内容

CSS 选择器特异性用于比较多个规则在样式冲突中的优先级。这个工具会根据你提交的选择器文本，给出四个特异性组成部分和一个数值分数，适合在调整样式覆盖关系、检查规则优先级时快速查看结果。输入框可以留空；空白输入也会返回结果，而不是要求先填写选择器。

操作步骤：输入并读取结果

1. 在选择器输入框中填写要检查的 CSS 选择器，例如 #panel、.card 或包含多个部分的选择器。也可以暂时不填写，用于查看空白输入对应的初始结果。

2. 提交输入并查看返回结果。非空文本的选择器表示会保留你提交的选择器文本，方便确认计算对象没有被替换。工具会分别统计 ID、类、属性选择器与伪类，以及伪元素和元素或类型选择器；通配选择器不会计入统计。

3. 先查看四个组成部分，再查看数值分数。需要比较规则时，记录各部分的位置和数值，不要只看一个孤立的总分。对于空白或只含空格的输入，结果应显示四个组成部分均为 0，分数为 0，选择器表示为空。

如何解释结果

四个组成部分按位置表示不同类型的贡献：第一项对应 ID，第二项对应类、属性选择器和伪类，第三项对应伪元素及元素或类型选择器，第四项用于保留四部分结果中的最低层级位置。数值分数按四项分别乘以 1000、100、10 和 1 后相加，因此较高位置的组成部分会带来更大的分数变化。

分数适合帮助你快速排序和定位覆盖关系，但阅读结果时仍应结合组成部分本身。一个选择器可能因 ID、类或类型部分不同而得到不同分数；通配选择器不增加统计值。对于复杂或不常见的写法，应把结果视为该工具识别范围内的计算，不宜据此断定所有 CSS 选择器写法都已被完整解析。

使用示例

你正在检查面板规则的优先级，并提交 #panel 作为要计算的选择器。

在选择器输入框中提交 #panel，然后查看组成部分、分数和选择器表示。

结果包含四个特异性组成部分、一个数值分数，以及保留原输入的选择器表示；对于 #panel，第一项为 1，其余三项为 0，分数为 1000。

使用限制

• 结果反映工具对已识别选择器类型的计数规则；通配选择器不计入统计，复杂或未被这些规则识别的写法不应被视为已完整解析。

常见错误

• 把空白输入的零分结果当成选择器计算失败。请先确认输入不是空白；如果确实需要测试空白状态，应将四项为 0、分数为 0 且选择器表示为空视为该输入的结果。

常见问题

不填写 CSS 选择器也能得到结果吗？

可以。输入框接受可选的选择器文本；如果留空或只输入空格，结果会显示四个零组成部分、分数为 0，选择器表示为空。

工具会保留我输入的选择器吗？

可以。提交非空文本后，返回的选择器表示会保留你提交的选择器文本，便于核对计算对象。

通配选择器和不同类型的选择器如何计数？

会，但通配选择器本身不计入统计。ID 会计入第一项，类、属性选择器和伪类会计入第二项，伪元素及元素或类型选择器会计入第三项。