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

Posted 2023-03-05

【中文标题】有没有办法对选择器进行分组？ [复制]

【英文标题】：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) ... ，这可能会为您提供更短的代码

是的，我知道这些选项，但还是谢谢。

【参考方案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