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>

So I wanted to do my css rules like this:

.bucket 1 .bucket 2 . bucket 3 {
}

.bucket 4 .bucket 5 .bucket 6 {
}

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.

Any suggestions?

回答1:

Use commas to separate the selectors in a list

.bucket1, .bucket2, .bucket3 {
}

.bucket4, .bucket5, .bucket6 {
}

回答2:

It may even make sense to do something like

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

That way you'll only need to say

.bucketStyleFirst {

}

.bucketStyleSecond {

}

This is of course if you'll only be having the two different options.

回答3:

I will try again... (forget the part about posting code...):

"E.g.: <div class = "someclass">... (notice the whitespace before and after =)

...should be: <div class="someclass"> to avoid confusing the browsers.

来源：https://stackoverflow.com/questions/18215636/combined-multiple-classes-into-one-css-rule

标签

css

rules

elements