CSS 权重的计算规则
1. CSS 权重的计算规则
CSS 权重由四个部分组成，格式为 (a, b, c, d)：
-
a: 内联样式（style="..."）的数量。 -
b: ID 选择器的数量。 -
c: 类选择器、属性选择器、伪类选择器的数量。 -
d: 元素选择器、伪元素选择器的数量。
每个部分的权重值是累加的，优先级从左到右依次递减。
2. 分析选择器
比如 #layouts div.layout__center div.protyle-content:not([data-fullwidth="true"]) div.protyle-wysiwyg
分解选择器：
#layouts div.layout__center div.protyle-content:not([data-fullwidth="true"]) div.protyle-wysiwyg
逐部分分析：
-
**ID 选择器 (**
#layouts ) ：- 匹配一个 ID 选择器：
#layouts。 - 权重贡献：
b = 1。
- 匹配一个 ID 选择器：
-
类选择器和伪类选择器：
-
.layout__center：类选择器。 -
.protyle-content：类选择器。 -
:not([data-fullwidth="true"])：伪类选择器。 - 权重贡献：
c = 3（2 个类选择器 + 1 个伪类选择器）。
-
-
元素选择器：
-
div（出现 3 次）：div.layout__center、div.protyle-content、div.protyle-wysiwyg。 - 权重贡献：
d = 3。
-
总结：
-
a（内联样式）：0（没有内联样式）。 -
b（ID 选择器）：1（#layouts）。 -
c（类选择器、属性选择器、伪类选择器）：4（.layout__center、.protyle-content、:not([data-fullwidth="true"]）。 -
d（元素选择器）：3（div 出现 3 次）。
因此，最终的权重为：(0, 1, 4, 3)。
3. 权重表示法
在某些工具中，权重可能会以简化的形式表示，例如：
-
(1, 4, 3) 表示(0, 1, 4, 3)。 - 工具可能省略了第一个
0，因为内联样式通常不参与此类选择器。
4. 权重比较
如果需要与其他选择器比较优先级，可以按照以下规则：
- 比较
a（内联样式）。 - 如果
a 相同，比较b（ID 选择器）。 - 如果
b 相同，比较c（类选择器、属性选择器、伪类选择器）。 - 如果
c 相同，比较d（元素选择器）。
例如：
-
(0, 1, 4, 3) >(0, 0, 5, 10)（因为b 更高）。 -
(0, 1, 4, 3) <(0, 2, 0, 0)（因为b 更低）。
5. 工具验证
使用工具（如 Specificity Calculator 或Css Specificity Calculator或其他在线工具）可以验证该选择器的权重为 (1, 4, 3)，这与手动计算的结果一致。
6. 总结
选择器 #layouts div.layout__center div.protyle-content:not([data-fullwidth="true"]) div.protyle-wysiwyg 的 CSS 权重为 (0, 1, 4, 3)，工具显示为 (1, 4, 3) 是合理的，因为它省略了第一个 0。
