css - 是否有使用大括号作为子类快捷方式的 CSS 父选择器？

Question

我有很多这样的 CSS 样式：

.T .class1{...}
.T .class2{...}
.T .class3{...}
...etc

有没有什么方法可以在不每次都写 .T 的情况下写这个？类似于媒体查询的工作方式会很棒：

.T{
    .class1{...}
    .class2{...}
    .class3{...}
    ...etc
}

这样的事情可能吗？如果不是，我们可以推测为什么不这样做的原因吗？

Answer 1

不，CSS 不支持这个。然而，像SASS和LESS这样的 CSS预处理器可以。

Answer 2

我一直希望 CSS 能够以这种方式构建，但遗憾的是，它没有。

如果所有的“.class1、.class2 等” 要样式相同，您可以使用几种方法。

您可以执行以下操作：

.T .class1, .T .class2, .T .class3....{
    /* Your code here */
}

或者你可以做这样的事情（取决于你的应用程序）：

.T *{
    /* Your code here */
}

后者不太具体，会选择 .T 元素内的所有内容。

我假设您需要单独设置每个“class1，class2”的样式，这会使这些答案毫无用处。那时，您可以使用 javascript 来实现这一点，尽管它并不那么优雅。

Answer 3

我正在为 Web 应用程序创建触摸样式表。身体标签具有 T 类，所以它下面的所有东西都将被设计为胖手指

您可以在 mobile.css 中编写所有样式，并仅使用 JS 为移动设备附加此文件

Answer 4

如前所述，您可以尝试以下魔法： - SASS：http ://sass-lang.com/ - LESS： http: //lesscss.org/

一旦你开始使用它们，在嵌套选择器时要小心不要发疯。