CSS代码重复优化咨询：如何高效编写避免重复的.btn:hover选择器？

嘿，很高兴能帮你搞定这两个CSS问题！咱们逐个拆解：

首先得明确：高效既要考虑浏览器解析性能，也要兼顾代码的可维护性。

当你遇到重复的父选择器（比如你第二个问题里反复出现的.btn:hover），最优的写法是把共享父选择器的子选择器合并，而不是重复书写完整的选择器链。原因有两个：

• 浏览器解析CSS是从右往左匹配的，重复书写相同的父选择器会让浏览器多次重复匹配同一个父元素，虽然现代浏览器性能足够强，但合并后能减少不必要的计算；
• 更重要的是，合并后的代码更简洁，后期修改父选择器（比如把.btn:hover改成.btn:focus）时，只需要改一次，不会漏改，维护成本低。

如果是不同选择器但样式完全相同，那用逗号分隔多个选择器（比如.a, .b { color: red; }）也是高效的，避免重复写相同的样式块。

你的原代码里反复写.btn:hover确实冗余，这里有两种靠谱的优化方案，看你是否用预处理器：

方案1：原生CSS :is() 伪类（推荐，无需预处理器） #

现代浏览器对:is()的支持已经非常完善了，它可以帮你把多个子选择器“打包”，共享同一个父选择器：

.btn:hover :is(
  .glyphicon-minus,
  .glyphicon-ok,
  .glyphicon-remove,
  .glyphicon-trash,
  .glyphicon-arrow-left,
  .glyphicon-arrow-right,
  .glyphicon-eye-open,
  .glyphicon-floppy-disk,
  .glyphicon-print,
  .glyphicon-pencil
) {
  color: black !important;
}

这个写法和你原来的代码效果完全一致，但.btn:hover只需要写一次，代码清爽多了。另外注意你原代码最后两个选择器之间少了个逗号，我已经补上啦。

方案2：用Sass/LESS等预处理器嵌套书写 #

如果你项目里用了CSS预处理器，嵌套写法会更直观：

.btn:hover {
  .glyphicon-minus,
  .glyphicon-ok,
  .glyphicon-remove,
  .glyphicon-trash,
  .glyphicon-arrow-left,
  .glyphicon-arrow-right,
  .glyphicon-eye-open,
  .glyphicon-floppy-disk,
  .glyphicon-print,
  .glyphicon-pencil {
    color: black !important;
  }
}

预处理器编译后会生成你原来的重复选择器代码，但你写的时候不用重复父选择器，后续修改也更方便。

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