是否有一种方法可以同时针对多个CSS类？

Question

例如，我在.less文件中有以下代码，并希望简化它。每个导航器都是一个单独的导航点。当用户悬停在导航点上时，我只想让特定导航点的背景色发生变化。不是每个人都是。

.nav-1:hover {
  background:#fc9426;
}
.nav-2:hover {
  background:#fc9426;
}
.nav-3:hover {
  background:#fc9426;
}
.nav-4:hover {
  background:#fc9426;
}
.nav-5:hover {
  background:#fc9426;
}
.nav-6:hover {
  background:#fc9426;
}
.nav-7:hover {
  background:#fc9426;
}
.nav-8:hover {
  background:#fc9426;
}
.nav-9:hover {
  background:#fc9426;
}

Answer 1

用逗号。

.nav-1:hover,
.nav-2:hover,
.nav-3:hover {
  color: #fc9426;
}

虽然我没有任何标记要删除，但看起来您可以创建一个助手/修饰符类，而不是一次又一次地定义相同的东西。

它看起来可能是这样的：

​

[class^="nav-"] {
  margin: 1rem 0;
  padding: 0 1rem;
  min-height: 3rem;
  color: #333;
  font: 1rem/3rem Arial, sans-serif;
  border-bottom: 1px solid black;
}

/**
 * Utility/Modifier style properties that
 * any nav could add to their base of styles.
 */
.nav-branded {
  color: white;
  background-color: #fc643c;
}
.nav-branded:hover {
  background-color: hotpink;
}

/**
 * These classes have styles specific to 
 * each class (acts like an ID but 
 * without the specificity).
 */
.nav-1 {
  /* Waiting for some styles. */
}
.nav-2 {
  border-bottom-width: 4px;
}
.nav-3 {
  border-bottom-style: dashed;
}

<nav class="nav-1 nav-branded">Nav One</nav>
<nav class="nav-2">Nav Two</nav>
<nav class="nav-3 nav-branded">Nav Three</nav>

​

CSS类应该被重用，所以您不必定义一组不同的类来获得相同的样式。

Answer 2

类的要点是，给定的属性要应用于各种元素。因此，您应该给每个<nav>相同的类。

<nav class='color-change'>
  .
  .
  .
</nav>

然后，在CSS /LESS中：

.color-change:hover {
  background:#fc9426;
}

Answer 3

如果不能更改标记以避免选择器的冗余，则可以使用属性选择器来用单个说明符捕获所有这些类：

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

这个问题最初是用less标记的，所以如果使用less，也可以使用递归单独生成这些类。这个任务在手册中有特色。

.generate-navs(9);

.generate-navs(@n, @i: 1) when (@i =< @n) {
  .nav-@{i}:hover {
    background:#fc9426;
  }
  .generate-navs(@n, (@i + 1));
}