将多个类组合成一个css规则

Question

我试图在这里做一些桶,一般来说我会一次做一个类元素.这似乎很愚蠢,因为类可以共享属性.

HTML

<div id = "outerBuckets">
        <div class = "bucket1">
            <div class ="bucketIcon">
                <p></p>
            </div>
        </div>
        <div class = "bucket2">
            <div class ="bucketIcon">
                <p></p>
            </div>
        </div>
        <div class = "bucket3">
            <div class ="bucketIcon">
                <p></p>
            </div>
        </div>
        <div class = "bucket4">
            <div class ="bucketIcon">
                <p></p>
            </div>
        </div>
        <div class = "bucket5">
            <div class ="bucketIcon">
                <p></p>
            </div>
        </div>
        <div class = "bucket6">
            <div class ="bucketIcon">
                <p></p>
            </div>
        </div> 
    </div>

所以我想像这样做我的css规则:

.bucket 1 .bucket 2 . bucket 3 {
}

.bucket 4 .bucket 5 .bucket 6 {
}

基本上我想要123以相同的方式格式化...并且456以另一种方式格式化.但是当我去做一些萤火虫检查.它不起作用.所以我想这不是表达这种方式的正确方法.我正在尝试清理我的css并将其中的一些组合起来,以便它们更清洁.

有什么建议？

Answer 1

使用逗号分隔列表中的选择器

.bucket1, .bucket2, .bucket3 {
}

.bucket4, .bucket5, .bucket6 {
}