如何合并CSS中样式规则相似的类的重复代码

你可以通过CSS的*群组选择器（用逗号分隔多个选择器）*抽离两个类完全重复的样式规则，无需为两个类重复编写相同属性，即可实现完全一致的显示效果。

方案1：不修改原有HTML结构，直接合并选择器 #

直接把共用相同样式的选择器用逗号分隔，把重复的属性统一定义一次即可，精简后的CSS代码如下：

/* 合并两个座位类下span的默认样式 */
div.bookedSeats span,
div.emptySeats span {
  display: none;
  position: relative;
  color: darkblue;
  font-family: serif;
}

/* 合并两个座位类hover状态下span的显示样式 */
div.bookedSeats:hover span,
div.emptySeats:hover span {
  display: block;
}

原有HTML代码不需要做任何修改，页面效果和之前完全一致。

方案2：抽离公共类（更推荐后续扩展使用） #

如果这两个座位类的交互逻辑后续大概率保持一致，还可以给对应DOM元素新增一个通用公共类，从结构层面减少冗余，长期可维护性更强。

修改后的HTML代码 #

<div class="seat bookedSeats"><span></span></div>
<div class="seat emptySeats"><span></span></div>

对应简化后的CSS代码 #

.seat span {
  display: none;
  position: relative;
  color: darkblue;
  font-family: serif;
}

.seat:hover span {
  display: block;
}

两种方案的适用场景：

• 方案1不需要改动现有DOM结构，适合已经上线、不想调整现有HTML的场景
• 方案2后续新增其他座位类型（比如锁定座位、已选座位）时，只要给对应元素加上seat公共类，就能直接复用这套悬停显示逻辑，不需要反复修改CSS选择器列表

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