将多个类合并到一个css规则中 [英] combined multiple classes into one css rule

问题描述

我想在这里做一些桶，一般我会做一个类元素一次。这似乎很蠢，因为类可以共享属性。

I'm trying to do some buckets here and generally I would do 1 class element at a time. That seems silly since classes can share attributes.

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规则：

So I wanted to do my css rules like this:

.bucket 1 .bucket 2 . bucket 3 {
}

.bucket 4 .bucket 5 .bucket 6 {
}

基本上我想要123格式化相同的方式...和456格式化另一种方式。但是当我去做一些检查firebug。它不工作。所以我想这不是正确的表达方式。我试图清理我的CSS一点，结合了这些东西，所以他们更干净。

Basically I wanted 123 to be formatted the same way...and 456 to be formatted another way. But when I went to do some checking in firebug. It wasn't working. So I guess this isn't correct way to express this. I'm trying to clean up my css a little and combined down some of these things so they are cleaner.

有任何建议吗？

推荐答案

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

Use commas to separate the selectors in a list

.bucket1, .bucket2, .bucket3 {
}

.bucket4, .bucket5, .bucket6 {
}

这篇关于将多个类合并到一个css规则中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！