Less 在更少的内存中扩展嵌套选择器

我有以下HTML（基本上）

我想少写一些用于tr:hover上的c1、c2、c3的CSS。滚动行时，行内的按钮具有不同的属性。输出CSS将是：

.table tr:hover {
   color: red;
}
.table tr:hover .c1, .table tr:hover .c2, .table tr:hover .c3 .... {
   color green;
}

我查看了extend，但不知怎么的，我无法理解这个特定的用例。或者我应该只使用&char。并在

表中嵌套：tr:hover

& c1, & c2, & c3...

---

您正试图在伪类中选择一个类。那是不可能的

正如我下面所说，它应该是这样的：

.table {
  tr:hover {
    color:red;
  }
  .c1, .c2, .c3 {
     tr:hover {
       color green;
     }
  }
}

.table tr {
   &:hover {
     color: red;
     .c1, .c2, .c3 {
       color: green;
     }
   }
}

---

HTML的设置方式很重要。我们在这里没有了解全部情况。

根据您列出的要求，您需要执行以下操作：

.table {
  tr:hover {
    color:red;
  }
  .c1, .c2, .c3 {
     tr:hover {
       color green;
     }
  }
}

.table tr {
   &:hover {
     color: red;
     .c1, .c2, .c3 {
       color: green;
     }
   }
}

将

&

视为希望与父级处于同一级别的任何内容，无论是

类

还是

伪类

---

当您嵌套项目时，它通常与HTML结构/层次结构相匹配，因此决定如何嵌套以及在何处嵌套非常简单。你想尽可能多地分享，而不想在进入“嵌套地狱”时过火

您能告诉我们您是如何尝试扩展的，这样我们就可以看到您尝试的模型是否有任何错误。我编辑了问题很高兴看到HTML结构匹配。我认为最简单的解决方案应该是peterdotjs建议的解决方案。

：hover

不是伪元素。而且，我看不出选择器有什么问题。当鼠标悬停在父元素上时，您肯定可以设置子元素的样式。请参见此处的顺序说明：我认为您/我误解了上下文。我对这个问题的解释是OP试图根据悬停在父母身上的方式来设计一个孩子，这是完全可能的。在回答中，您链接的类和标记名都属于同一个元素，并且所讨论的选择器是错误的。@harry，您是对的。我们讨论的是

tr

的子类，当我们将鼠标悬停在

tr

上时，这些子类是活动的。例如

tr>td>div.class

Well有助于发布HTML大纲：）也适用于&.c1、&.c2、&.c3{color:green}，因为“&.c1”表示“.table tr:hover.c1”。但是我想这两种方法都有相同的输出，尽管最初我假设“.c1、.c2、.c3”不带&will输出“table tr:hover.c1、.c2、.c3”@LavaRo我列出的结构假设c1、c2、c3是

tr

的子元素的类。如果它们c1、c2、c3是tr元素的类-也就是说，你会使用

&

Tue，但是写&.c1似乎和你说的有相同的效果，因为它输出

parent[space].c1

@LavaRo，尽管它有效，但我建议避免这种歧义。它更难读取，如果编译器更改越少，可能会导致错误。