有没有办法分组选择器？

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...
    }
  }
}

至于你的评论，在第一个选择器后删除{​​{1}}选择器会产生不同的结果：

此示例

>

编译成

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

Answer 2

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

@selector: .otherClass >;

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