有没有办法对选择器进行分组？ [复制]答案

【问题标题】：Is there a way to group selectors? [duplicate]有没有办法对选择器进行分组？ [复制]
【发布时间】：2016-12-02 12:44:21
【问题描述】：

我正在尝试使用 LESS 处理选择器的所有 div、table、ul、dl 等子项。

我很想写这样的东西。

.myclass {
  ...

  &.otherClass > (div, ul, dl, table) {
    // define some rules...
  }
}

我希望得到以下输出。

.myclass.otherClass > div,
.myclass.otherClass > ul,
.myclass.otherClass > dl,
.myclass.otherClass > table {
  // rules
}

但括号似乎不受支持，因为它按原样编译，当然会导致无效的 CSS。

是否有任何语法或其他方式可以在定义中使用这样的快捷方式？

【问题讨论】：

是所有子标签还是仅是几个选定的标签类型？ ... 或者除了一种标签类型之外的所有标签类型？
只是我在帖子中列举的这些标签。
询问您是否可以使用.myclass.otherClass > * { ... } 或.myclass.otherClass > :not(li) { ... }，这可能会为您提供更短的代码
是的，我知道这些选项，但还是谢谢。

标签： css less

【解决方案1】：

您的解决方案：

.myclass {
  ...

  &.otherClass {
    > div, > ul, > dl, > table {
         // define some rules...
    }
  }
}

至于您的评论，在第一个选择器之后删除 > 选择器会产生不同的结果：

这个例子

div {
    > span, p, a {
     border:1px solid #333;
    }
}

编译成

div > span, div p, div a {
    border: 1px solid #333;
}

这个例子

div {
    > span, > p, > a {
     border:1px solid #333;
    }
}

编译成

div > span, div > p, div > a {
    border: 1px solid #333;
}

【讨论】：

【解决方案2】：

另一个类似于兰迪回答的解决方案是为.otherClass 和> 使用变量：

@selector: .otherClass >;

.myclass {
  display:block;
  &@{selector} {
    div, ul, dl, table {
      color:red
    }
  }
}

【讨论】：