将多个类组合成一个 CSS 规则答案

【问题标题】：combined multiple classes into one css rule将多个类组合成一个 CSS 规则
【发布时间】：2013-08-13 17:36:04
【问题描述】：

我正在尝试在这里做一些桶，通常我会一次做 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，并将其中的一些东西组合起来，这样它们就更干净了。

有什么建议吗？

【问题讨论】：

标签： css rules elements

【解决方案1】：

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

.bucket1, .bucket2, .bucket3 {
}

.bucket4, .bucket5, .bucket6 {
}

【讨论】：

哇！那是durp的错误。谢谢 =/ 我现在有点尴尬。
这应该被接受为正确答案@user2089405

【解决方案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 {

}

当然，前提是您只有两种不同的选择。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：