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

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

中

& c1, & c2, & c3...

Answer 1

您正在尝试 select 一个 class 一个伪 class。这不可能。

按照我的理解，应该是这样的：

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

HTML 的设置方式很重要。我们并没有得到全貌。

Answer 2

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

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

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

嵌套项通常与 HTML structure/hierarchy 匹配，因此决定嵌套的方式和位置非常简单。您想尽可能多地分享，但又不想过分达到 "nested hell"。

Extending nested selectors in LESS