有没有办法一次单独定位多个 CSS 类？ [复制]答案

【问题标题】：Is there a way to individually target multiple CSS classes at once? [duplicate]有没有办法一次单独定位多个 CSS 类？ [复制]
【发布时间】：2018-09-30 08:32:51
【问题描述】：

例如，我在 .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;
}

【问题讨论】：

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

标签： css css-selectors

【解决方案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 类旨在重复使用，因此您不必定义一堆不同的类来获得相同的样式。

【讨论】：

【解决方案2】：

类的意义在于将给定的属性应用于各种元素。所以你应该给每个<nav> 一个相同的类。

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

然后在你的 CSS/LESS 中：

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

【讨论】：

【解决方案3】：

如果您无法更改标记来避免选择器的冗余，您可以使用 attribute selector 来使用单个说明符捕获所有这些类：

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

该问题最初标记为less，因此如果使用less，您还可以使用递归来单独生成这些类。此任务在manual：

.generate-navs(9);

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

【讨论】：

【解决方案4】：

我想你想象你有这样的代码

 <div class="nav-1"> </div>
 <div class="nav-2"> </div>
 <div class="nav-3"> </div>
 <div class="nav-4"> </div>

如果是这样，您可以使用更好的高级选择器来简化代码

[class*='nav-']{
      background:#fc9426;
    }

这样，您将选择'class'属性中在代码的任何部分具有单词'nav-'的元素，这是类名的共同部分

如果在 HTML 中他们有一个父亲

 <div class="nav">
   <div class="nav-1"> </div>
   <div class="nav-2"> </div>
   <div class="nav-3"> </div>
   <div class="nav-4"> </div>
 </nav>

你可以使用这个 CSS

  .nav > div{}
  .nav [class*='nav-']{}
  .nav > div:nth-of-type(1){} /* the number of the son */
  .nav > div:nth-of-type(2n){} /* all the pairs */
  .nav > div:nth-of-type(2n+1){} /* all the odd */

【讨论】：