Question

通常，我可以将CSS规范应用于多个元素，例如：

.class1, .class2, #tag1, #tag2 {
margin: 10px;
color: black;
etc: etc; }

在我当前的js代码项目中，我使用body.className作为开关。如果className设置为“正在查看”，则代码的不同部分会发生某些事情，例如：

.viewing #content {padding: 0}
.viewing #footer {display:none}
.viewing #nav {display:none}

我的问题是，是否有办法合并.viewing #footer和viewing #nav之类的内容 - 例如：

.viewing #footer, #nav {display:none);

Answer 1

不使用CSS本身，您必须重复.viewing部分：

.viewing #footer, .viewing #nav {
    /* Rules to apply to #footer and #nav when an
       ancestor element (like body) has .viewing
    */
}

Sass，Less等提供更丰富的选择机制，然后将它们编译为纯CSS以便传送到浏览器，您可以查看它们。

例如，使用Sass的SCSS，您可以这样写：

/* This is SCSS, not CSS */
.viewer {
    #footer, #nav {
        /* Rules to apply to #footer and #nav when an
           ancestor element (like body) has .viewing
        */
    }
}

Sass会预处理并输出CSS兼容规则。

Answer 2

是的，但您必须这样做：

.viewing #footer, .viewing #nav {display:none);

Answer 3

您可以这样做：

tag#id.class

或在您的情况下.class#id 例如：

.my-class#my-id, .my-class#other-id

Answer 4

他们有drafted一个用于在CSS中嵌套支持的模块，因为它还没有被引入，所以你不能只使用CSS本身，就像T.J.已经写了。

即使使用像Sass等其他CSS预处理器也无法实现这一点，因为他们最终将为您编译CSS，正如您现在所知，它不支持嵌套，除了{ {3}}

我可以将切换CSS应用于多个元素吗？

4 个答案: