能否同时单独定位多个CSS类？求LESS导航悬停代码简化方案

当然可以！你现在写的这些重复代码完全能通过LESS的特性简化，给你几个实用的方案，按需选就行：

方案1：属性选择器（快速直接） #

如果你的导航类都是以nav-开头的，直接用属性选择器匹配所有符合规则的元素：

[class^="nav-"]:hover {
  background: #fc9426;
}

注意：如果页面里还有其他以nav-开头的类（比如nav-sidebar），这个选择器也会命中它，所以只有当这些带编号的导航是唯一以nav-开头的元素时，这个方法最省事。

方案2：LESS循环（适合有规律的编号类） #

因为你的导航是按数字编号的，用LESS的循环功能可以动态生成这些选择器，以后加新的导航只要修改循环的结束数字就行：

// 定义循环函数
.generate-nav-hover(@n) when (@n > 0) {
  // 递归调用，从大到小生成样式
  .generate-nav-hover(@n - 1);
  .nav-@{n}:hover {
    background: #fc9426;
  }
}

// 调用循环，这里假设最多有7个导航，可按需调整数字
.generate-nav-hover(7);

编译后会自动生成.nav-1:hover到.nav-7:hover的所有样式，非常灵活。

方案3：统一基础类（最推荐的语义化写法） #

其实最优雅的做法是给所有导航元素加一个共同的基础类，比如.nav-item，然后直接针对这个基础类写hover样式：

// HTML中每个导航元素的class改为：class="nav-item nav-1"、class="nav-item nav-2"...
.nav-item:hover {
  background: #fc9426;
}

这样不仅样式代码最简洁，HTML结构也更语义化，后续维护成本极低——不管新增多少个导航，只要给元素加上.nav-item类，hover样式就会自动生效。

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