🎯 CSS选择器权重计算器

输入CSS选择器

选择器对比

输入两个选择器，快速对比它们的优先级高低

常用选择器示例

点击下方预设，快速查看常见选择器的权重

CSS选择器权重规则

CSS选择器权重（Specificity）是浏览器决定哪个CSS规则优先应用的计算系统。权重以 (a, b, c) 三元组表示：

• a（ID选择器）：每出现一个ID选择器（如 #nav），a 加 1
• b（类/属性/伪类）：每出现一个类选择器（如 .active）、属性选择器（如 [type="text"]）或伪类（如 :hover），b 加 1
• c（标签/伪元素）：每出现一个标签选择器（如 div）或伪元素（如 ::before），c 加 1

计算权重时，先比较a，a大的胜出；a相同则比较b，b大的胜出；b相同则比较c。c也相同则后声明的规则胜出（层叠）。

特殊规则：通用选择器 * 的权重为0；组合符（>、+、~）不影响权重；:not() 本身的权重为0，但括号内的选择器计入权重。

使用教程

CSS选择器权重计算器是前端开发者的实用调试工具，以下是详细使用指南：

计算单个选择器权重：在输入框中输入任意合法的CSS选择器（如 #nav .menu li a:hover），点击「计算权重」按钮，工具会立即解析该选择器的组成，并以三元组 (a,b,c) 和总分的形式展示结果。结果区域会详细列出ID选择器、类选择器、标签选择器的数量，帮助你理解该选择器的优先级来源。

对比两个选择器：当你不确定两个选择器哪个优先级更高时，可以在「选择器对比」区域分别输入两个选择器（如 A输入 #header .nav，B输入 header .nav），点击「对比权重」按钮。工具会同时计算两个选择器的权重并以高亮方式标出优先级更高的那个，让你直观地看到ID选择器对整体权重的决定性影响。

使用预设示例：如果你是CSS新手，可以点击下方「常用选择器示例」中的预设按钮，快速体验不同类型选择器的权重差异。这些示例覆盖了从简单到复杂的各种场景，包括属性选择器、伪类、伪元素以及组合选择器。

应用场景

调试样式覆盖问题：当网页中出现「明明写了样式却不生效」的情况时，最常见的原因就是选择器权重不足。使用本工具快速计算冲突双方的选择器权重，定位问题根源。例如一个元素同时被 .card .title 和 .card-title 命中时，前者权重为(0,2,0)，后者为(0,1,0)，前者胜出。

代码审查与重构：在团队代码审查中，选择器权重是一个重要的审查点。过度依赖ID选择器或深层嵌套选择器会降低样式的可复用性和可维护性。通过本工具量化每个选择器的权重，可以帮助团队建立统一的CSS编码规范，例如规定禁止使用ID选择器、限制选择器嵌套深度不超过3层等。

学习CSS优先级机制：对于CSS初学者，Specificity是一个抽象且难以理解的概念。本工具通过可视化的方式将选择器拆分为ID、类、标签三个维度，并以数值形式展示权重，大大降低了学习门槛。配合预设示例，学生可以直观地看到不同类型选择器的权重差异。

扩展知识

CSS层叠与继承的区别：很多开发者容易混淆「层叠（Cascade）」和「继承（Inherit）」。层叠是指当多个规则匹配同一元素时，浏览器根据来源（作者样式、用户样式、浏览器默认）、权重和声明顺序来决定哪个规则生效。继承则是指某些属性（如color、font-family）会自动从父元素传递给子元素。两者是不同维度的概念。

BEM命名规范：BEM（Block Element Modifier）是一种CSS命名方法论，通过 .block__element--modifier 的命名方式将样式限制在单一类选择器内，从而天然地避免了权重军备竞赛。在BEM规范下，几乎所有选择器的权重都是(0,1,0)，开发者只需关注HTML结构即可。

CSS层级选择器（:where和:is）：现代CSS引入了 :where() 和 :is() 两个函数式伪类。:is() 会将其参数的选择器权重计入总权重，而 :where() 的权重始终为0。这意味着你可以用 :where() 编写复杂的选择器组合而不增加权重，是解决权重问题的利器。

常见问题 FAQ