Loading...
Loading...
计算并比较 CSS 选择器的权重。
当两条 CSS 规则命中同一个元素时,权重(优先级)高的那条生效。权重用三个数字表示:ID 级、类级、元素级,光靠肉眼判断很容易出错。这个工具替你给任意选择器评分,并指出哪条会胜出。
每行粘贴一个选择器,各自评分为 (a, b, c):a 数 ID 选择器,b 数类、属性和伪类,c 数元素和伪元素。各部分拆开显示,你能看清权重从哪来;输入多个选择器时,最具体的那个会被高亮。它也处理现代函数式伪类::where() 不加权,而 :is() 和 :not() 取其参数中最高的权重。一切都在浏览器里运行。
每个选择器得到标准的三段式权重评分。
ID、类、元素分别显示并用颜色区分。
输入多个选择器,最具体的会被标出。
处理 :is()、:not() 和零权重的 :where()。
把 ::before 和旧式 :before 正确算作元素。
评分随输入更新,什么都不上传。
某条样式不生效时,把该胜出的规则和覆盖它的规则都贴进来;分数更高的那条就解释了浏览器为何那样选。
每行粘贴一个 CSS 选择器。
看每个的 (a, b, c) 分及其拆解。
比较选择器;最具体的会高亮。
调整选择器以提高或降低它的权重。
弄清为什么一条规则覆盖了另一条。
有意提高权重,而不是动用 !important。
发现过于具体、日后难以覆盖的选择器。
看清选择器各部分如何贡献权重。
选择器分多趟扫描:先取出函数式伪类,再是 ID、伪元素、属性、类和其余伪类,最后统计剩下的元素名。
无账号、无网络请求;评分在你的浏览器本地运行。
每个选择器用几个正则评分,所以输入时结果即时更新。