有没有办法分组CSS元素/选择器？

Question

目前我有类似的东西：

.class1 p {
    blablabla
}

.class1 h1 {
    blaaa
}

.class1 a {
    bla bla bla
}

有什么方法可以将它压缩到均匀，使它看起来更整洁？我最终得到40个左右的.class1条目，这是一个眼睛。

编辑：我的意思是让它们保持不同（例如h1是黑色而p是红色），但是在写入时压缩它所占用的空间以使其看起来更简单。

tl; dr group selectors？

Answer 1

您可以查看允许您使用嵌套的CSS预处理器，例如Less或Sass。例如，在.less文件中，它看起来像：

.class {
    p {
        ....
    }

    h1 {
        ....
    }

    a {
        ....
    }
}

仍然可以编译成.css文件中的代码示例。但是，如果你沿着这条路走下去，请确保你没有开始嵌套太深，因为这会创建真正特定的选择器。

Answer 2

使用,分组选择，如下所示：

.class1 p, .class1 h1, .class1 a{
   color: red;
}