在 LESS 中扩展嵌套选择器

Posted 2023-03-29

【中文标题】在 LESS 中扩展嵌套选择器

【英文标题】：Extending nested selectors in LESS

【发布时间】：2015-05-13 13:25:26

【问题描述】：

我有以下 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...

【问题讨论】：

您能否告诉我们您是如何尝试扩展的，以便我们查看您尝试的模型是否有任何错误。

我编辑了问题

很高兴看到 HTML 结构伙伴。我认为最简单的解决方案是 peterdotjs 建议的解决方案。

【参考方案1】：

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

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

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

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

【讨论】：

也适用于 & .c1, & .c2, & .c3 color: green 因为“& .c1”表示“.table tr:hover .c1”。但我猜这两种方法都有相同的输出，虽然最初我假设“.c1, .c2, .c3”没有 & 会输出“table tr:hover .c1, .c2, .c3”

@LavaRo 我列出的结构假定 c1、c2、c3 作为 tr 的子元素的类。如果它们 c1、c2、c3 是 tr 元素的类 - 那就是您将使用 &

Tue but writing & .c1 似乎和你说的效果一样，因为它输出parent[space].c1

@LavaRo 虽然它有效，但我建议避免这种歧义。它更难阅读，如果 LESS 编译器发生更改，可能会导致错误。

【参考方案2】：

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

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

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

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

【讨论】：

:hover 不是伪元素。另外，我看不出选择器有什么问题。将鼠标悬停在父元素上时，您绝对可以设置子元素的样式。

哦，我的错，“伪级”。在此处查看订单说明：***.com/a/1935823/3739498

我认为你/我误解了上下文伙伴。我如何解释这个问题是 OP 正试图根据悬停在父母身上来设置孩子的样式，这绝对是可能的，正如 here 所见。在您已链接的答案中，类和标签名称属于同一元素，并且有问题的选择器错误。

@harry 你是对的。我们谈论的是tr 的子类，当我们将鼠标悬停在tr 上时，它们处于活动状态。如tr>td>div.class

很好，您已经发布了 HTML 大纲 :)