CSS优先级计算器

什么是CSS优先级计算器？

如何使用CSS优先级计算器

1. 1

   输入选择器：把需要计算优先级的CSS选择器粘贴或输入到第一个输入框中，注意不要输入多余的空格或符号，避免识别错误。

2. 2

   查看结果：工具会自动识别输入内容，计算出该CSS选择器对应的优先级分值，并展示对应分值拆分结果。

3. 3

   添加对比：如果需要比较两个选择器的优先级，点击『添加对比』按钮，就会生成第二个输入框，填入第二个选择器即可。

4. 4

   对比权重：填入两个选择器后，工具会自动计算两个选择器各自的优先级分值，并自动判断哪个选择器的优先级更高。

什么场景会用到？

计算示例

注意事项

• 伪元素选择器（如::before）会计入标签/伪元素项加1，伪类选择器（如:hover）会计入类/伪类项加1，二者不要混淆。
• 本工具不计算!important优先级，!important优先级高于所有常规选择器，不参与常规权重比较。
• 组合符（空格、>、+、~）不改变优先级，不会为选择器增加权重值。
• 通用选择器*、:root不增加优先级，不会贡献权重分数。

常见问题

参考资料

• MDN Web Docs CSS 优先级文档
• W3C CSS Selectors Level 3 规范

本页遵循W3C CSS选择器规范的优先级计算规则，所有计算逻辑已经过开发验证，示例结果均经程序复算，由工具集编辑组维护。