有没有一种方法来分组选择器？

Question

我正试图解决所有使用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当然。

是否有任何语法或其他方式来定义这样的快捷方式？

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

Answer 2

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

@selector: .otherClass >; 

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