объединил несколько классов в одно правило css

Я пытаюсь сделать здесь несколько ведер, и обычно я бы делал 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 - по-другому. Но когда я пошел проверить firebug. Это не работало. Поэтому я думаю, что это неправильный способ выразить это. Я пытаюсь немного почистить свой css и объединить некоторые из этих вещей, чтобы они были чище.

Какие-либо предложения?


css rules elements
person Cvrpapc    schedule 13.08.2013    source источник

Ответы (3)


arrow_upward
40
arrow_downward

Используйте запятые для разделения селекторов в списке

.bucket1, .bucket2, .bucket3 {
}

.bucket4, .bucket5, .bucket6 {
}
person Community    schedule 13.08.2013
comment
дох! это была глупая ошибка. Спасибо =/ Мне как-то неловко сейчас. - person Cvrpapc; 13.08.2013
comment
Это следует принять как правильный ответ @ user2089405 - person Faris Marouane; 13.04.2020

arrow_upward
0
arrow_downward

Возможно, имеет смысл сделать что-то вроде

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

}

Это, конечно, если у вас будут только два разных варианта.

person Chris    schedule 13.08.2013

arrow_upward
0
arrow_downward

Я попробую еще раз... (забудьте часть о коде публикации...):

"Например: <div class = "someclass">... (обратите внимание на пробелы до и после =)

... должно быть: <div class="someclass">, чтобы браузеры не путались.

person Dennis Munding    schedule 13.07.2015