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;
}

虽然我没有任何标记可以使用，但看起来你可以创建一个帮助/修饰符类而不是一遍又一遍地定义相同的东西。

它可能看起来像这样：

＆＃13;

[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;
}

＆＃13;

<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>

＆＃13;

CSS类可以重复使用，因此您不必定义一堆不同的类来获得相同的样式。

Answer 2

类的要点是将给定属性应用于各种元素。所以你应该给每个var row = $(this).prop('id').split('_')[1]; var col = $(this).prop('id').split('_')[2];同一个班级。

<nav>

然后在你的CSS / LESS中：

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

Answer 3

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

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

否则，您可以使用递归来单独生成这些类。此任务包含在manual：

中

.generate-navs(9);

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

Answer 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;
    }

通过这种方式，您将选择＆＃39;类中的元素。属性在代码的任何部分都有单词＆＃39; nav - ＆＃39;，这是该类共同名称的一部分

如果在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 */

有没有办法一次单独定位多个CSS类？

4 个答案: