a11y.skipToMainContent
1

CSS 特性计算器

粘贴 CSS 选择器查看其特异性分数,并进行头对头比较,并了解哪个胜出.

Was this tool helpful?
Send output to:
Advertisement

How to use CSS Specificity Calculator

  1. 将一个或多个 CSS 选择器粘入输入框(每行一个).
  2. 每个选择者的特异性以(a,b,c)三相显示,并分出ID,类和元素.
  3. 当您输入多个选择器时,获胜者会以"WINS"徽章以绿色突出出.
  4. 使用条形图来对比所有选择者的特异性.
  5. 编辑任何选择器并实时观看结果更新.

{姓名}是什么来着?

CSS特异性决定当多个规则针对同一元素时,哪些样式适用. 它被计算为三元值(a,b,c),其中'a'计为ID,'b'计为类/属性/pseudo-class,而'c'计为元素/pseudo-cus. 更高值胜出, 以 “ a” 为最大值。

这个工具分析您的选择者, 并立即解析其特性 。 粘贴多个选择者(每行一个),工具会突出赢家. 它正确处理现代CSS伪类,如:is (),:not (),:has (),以及:where () 根据CSS选择器4级规格.

Advertisement

FAQ

数字(a,b,c)是什么意思?
这三个数字代表: a = ID 选择器数 (#id), b = 类数 (. class),属性数 ([atr]),和伪类数 (:hover), c = 元素名数 (div, p)和伪元素数 (: 在前). 内在风格胜过一切 .
:is()和:not()如何具体操作?
根据 CSS 选择器的 第 4 级 spec, :is () 和: not () 取其最具体参数的特异性 。 例如:is(#id,.class)具有特异性(1,0,0)——是其论据中最高的. :has () 工作方式相同. : 哪里( ) 总是贡献 (0, 0) , 无论它的论点如何 .
怎么样,重要吗?
不论具体程度如何,重要的声明都优先于正常的声明。 当两个! 此工具只计算基准选择器的特异性 .

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

← Back to Developer Tools · All tags

Last updated:

Advertisement