css选择器包装/分组？

Question

有没有办法将多个选择器分组如下：

[data-my-attribute]{

.prop1{}
.prop2{}
.prop3{}

}

@media是一种分组。但我希望它只适用于某些特定的孩子。我对.class1，.class2，.class3 {}语法

不感兴趣

有什么方法可以组合@media和[data-]？

事情是，在这种情况下，我没有控制.prop1,2,3 ..因为他们来自其他人。我需要一种方法来分组它们。

我尝试了几次谷歌搜索，没有运气。

可以吗？ ：）

Answer 1

不使用CSS。

但是，您可以使用SASS或LESS以这种方式组织样式，但是您需要使用编译器从这些文件生成实际的CSS。

例如，使用SASS，您可以执行以下操作：

[data-my-attribute] {
  .prop1{
    color: blue;
  }
  .prop2{
    color: red;
  }
  .prop3{
    color: green;
  }
}

编译为：

[data-my-attribute] .prop1 {
  color: blue;
}  

[data-my-attribute] .prop2 {
  color: red;
}

[data-my-attribute] .prop3 {
  color: green;
}