在 LESS 中扩展嵌套选择器

Question

我有以下 HTML（基本上）

table
  tr
    td
      .c1
      .c2
      .c3
    td
  tr
  ... more rows...
table

我想为适用于 tr:hover 上的 c1、c2、c3 的 CSS 编写 LESS。当您滚动该行时，该行内的按钮具有不同的属性。输出 CSS 将是：

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

我查看了扩展，但不知何故，我无法弄清楚这个特定的用例。或者我应该只使用 & char。并嵌套在table:tr:hover

& c1, & c2, & c3...

Answer 1

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

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

将& 视为您希望与父级别处于同一级别的任何内容，无论是class 还是pseudo class。

当您嵌套项目时，它通常与 HTML 结构/层次结构相匹配，因此决定嵌套的方式和位置相当简单。您希望尽可能多地分享，而不会过分进入“嵌套地狱”。

Answer 2

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

按照我的思路，应该是这样的：

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

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