CSS中重复书写同一类名提升选择器优先级是否为标准规定行为？

这种行为完全符合W3C制定的CSS选择器特异性计算规范，现行标准中没有要求对同一选择器内重复类名去重的相关规则。

特异性计算规则说明 #

CSS选择器的特异性按三类权重累加计算，每类权重独立计数、互不跨级覆盖：

• 第一级（权重最高）：ID选择器（#id），每出现1次计数+1
• 第二级：类选择器（.class）、属性选择器（[attr=val]）、伪类选择器（:hover），每出现1次计数+1
• 第三级（权重最低）：元素选择器（div/p）、伪元素选择器（::after），每出现1次计数+1

只要选择器合法，不管其匹配的是否是同一个元素特征，都会累计对应层级的权重。

场景权重计算验证 #

你遇到的场景中各规则的权重计算如下：

1. 初始规则.tile { background-color: red; }：仅包含1个类选择器，权重为0-1-0
2. 同事新增规则div.new { background-color: blue; }：包含1个元素选择器+1个类选择器，权重为0-1-1，高于初始规则因此生效
3. 重复类名规则.tile.tile.tile.tile { background-color: red; }：累计出现4个类选择器，权重为0-4-0，高于0-1-1因此覆盖生效

相关实践建议 #

这种通过重复同类选择器堆叠权重的方式确实属于不推荐的糟糕实践，会导致项目的优先级体系混乱，后期维护成本极高，更合理的替代方案包括：

• 调整选择器层级，使用更精准的匹配规则，比如div.tile即可获得0-1-1的权重，和同事的规则权重相同，只要写在后面即可生效
• 若属于组件级样式，可以加上组件容器的类名，避免和全局样式冲突

内容的提问来源于stack exchange，提问作者cst1992