CSS 特异性计算器：比较选择器分值
每行粘贴一个 CSS 选择器，即可以 (a, b, c) 分值计算其特异性。ID 计入 a，类、属性和伪类计入 b，元素和伪元素计入 c。:where() 不增加特异性，而 :is()、:not() 和 :has() 采用其参数中的最高特异性。对分值排序即可比较选择器。
CSS 特异性计算器是一款在浏览器中计算和比较 CSS 选择器特异性的工具。每行输入一个选择器，即可看到其 (a, b, c) 分值，然后对结果排序以比较选择器权重。当您想更清楚地了解为什么某个选择器可能优先于另一个时，它很有用。
该计算器遵循特异性分组：ID 计入 a，类、属性和伪类计入 b，元素和伪元素计入 c。特殊伪类规则很重要：:where() 不增加特异性，而 :is()、:not() 和 :has() 取其参数中的最高特异性。该工具还提供可调整的选项，但现有说明未列出各选项的具体设置。
CSS 选择器描述规则适用于哪些元素，而特异性提供了一种比较选择器权重的方法。计算权重有助于检查样式或排查相互竞争的规则。对分值排序让您可以一目了然地比较多个选择器，包括使用不同组件的选择器。
CSS 特异性计算器完全在浏览器中运行。您的输入在设备上处理，不会上传、存储或发送到服务器。页面加载后即可离线使用，无需联网。
该计算器可以帮助使用 CSS 的开发者和运维工程师，无论是学习特异性计数的新手，还是评审样式表的资深用户。它在浏览器中运行，无需本地安装。
步骤 1：粘贴或输入您的 CSS 选择器，每行一个。计算器会为每个选择器返回单独的特异性分值。
步骤 2：查看可用选项并根据需要调整。工具说明未列出具体的选项设置。
步骤 3：将每个结果检查为 (a, b, c) 分值：ID 计入 a，类、属性和伪类计入 b，元素和伪元素计入 c。
步骤 4：按分值对结果排序，比较选择器特异性，帮助判断哪条规则可能优先。
步骤 5：复制结果，用于您的笔记或 CSS 评审。
使用场景：调试看似相互覆盖的 CSS 规则时检查选择器特异性。比较分值有助于发现哪个选择器特异性更高。
使用场景：重构样式表时，在调整结构前比较选择器。计算器让每个选择器的 (a, b, c) 分值一目了然。
使用场景：了解 ID、类、属性、伪类、元素和伪元素如何影响特异性，无需手动逐一计算。
使用场景：比较使用 :is()、:not() 或 :has() 的选择器。计算器会采用每个伪类参数中的最高特异性。
使用场景：检查选择器中 :where() 的效果。它不增加特异性，查看 CSS 时可以验证这一点。
使用场景：无需安装本地工具即可完成 CSS 特异性检查。在您使用的机器上用浏览器打开计算器。
使用场景：查看包含内部项目细节的选择器，而无需上传到第三方服务。输入在浏览器中处理。