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

Question

我正在尝试在这里做一些桶，通常我会一次做 1 个类元素。这似乎很愚蠢，因为类可以共享属性。

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 {
}

Answer 2

做类似的事情甚至可能是有意义的

<div id = "outerBuckets">
        <div class = "bucketStyleFirst">
            <div class ="bucketIcon">
                <p></p>
            </div>
        </div>
        <div class = "bucketStyleFirst">
            <div class ="bucketIcon">
                <p></p>
            </div>
        </div>
        <div class = "bucketStyleFirst">
            <div class ="bucketIcon">
                <p></p>
            </div>
        </div>
        <div class = "bucketStyleSecond">
            <div class ="bucketIcon">
                <p></p>
            </div>
        </div>
        <div class = "bucketStyleSecond">
            <div class ="bucketIcon">
                <p></p>
            </div>
        </div>
        <div class = "bucketStyleSecond">
            <div class ="bucketIcon">
                <p></p>
            </div>
        </div> 
</div>

这样你只需要说

.bucketStyleFirst {

}

.bucketStyleSecond {

}

这当然是如果您只有两种不同的选择。

Answer 3

我会再试一次......（忘记发布代码的部分......）：

“例如：<div class = "someclass">...（注意 = 前后的空格）

...应该是：<div class="someclass">避免混淆浏览器。