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

我看了一下extend，但不知怎的，我无法弄清楚这个特殊的用例。或者我应该只使用＆amp;焦炭。并嵌套在table:tr:hover

中

& c1, & c2, & c3...

Answer 1

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

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

将&想象成与父级别处于同一级别的任何内容，无论是class还是pseudo class。

当您嵌套项目时，它通常与HTML结构/层次结构匹配，因此决定嵌套的方式和位置非常简单。你希望尽可能多地分享，而不必过分接触＃34;嵌套地狱＆＃34;。

Answer 2

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

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

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

如何设置HTML非常重要。我们在这里没有全面了解。