为何在CSS中连续使用相同的类选择器.className.className？

这种写法.className.className是有实际用途的，主要有以下几个场景：

• 提升选择器优先级：CSS选择器优先级计算中，每个类选择器对应10分权重，连续两个相同类选择器的权重就是20分，比单个.className优先级更高。如果页面存在同权重的样式冲突，用这种写法能确保目标样式生效，无需依赖!important。

• 匹配含重复类名的元素：虽然很少会刻意给元素添加重复类名，但如果元素的class属性是<div class="className className">这类重复格式，该选择器能精准匹配它。不过这种场景比较少见，更多还是用于优先级提升。

• 适配动态类名场景：部分前端框架或脚本可能会动态给元素重复添加类名，这种写法可以保证样式在这类场景下依然正常生效。

举个实际例子：

/* 基础样式 */
.className {
  font-weight: normal;
}

/* 优先级更高的样式 */
.className.className {
  font-weight: bold;
}

此时，带有重复className类的元素，或者需要覆盖基础样式的元素，都会应用加粗的字体样式。

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