Tek bir kural içinde birden çok sınıflı hedef öğeleri

Birden çok sınıf içeren öğelere sahip olan bazı HTML'im var ve bunları tek bir kural dahilinde atamam gerekiyor, böylece aynı sınıflar farklı kaplar içinde farklı olabilir. Bunun CSS'mde olduğunu varsayalım:

.border-blue {
    border: 1px solid blue;
}
.background {
    background: url(bg.gif);
}

Sonra bunu HTML'mde var:

<div class='border-blue background'>Lorum Crap No-one Cares About Ipsum</div>

Bunları tek bir kural içinde hedefleyebilir miyim? Bunun gibi, örneğin çalışmadığını bildiğim gibi:

.border-blue, .background {
    border: 1px solid blue;
    background: url(bg.gif);
}

.border-blue.background { ... }birden çok sınıfa sahip bir öğe içindir.
.border-blue, .background { ... }her biri kendi sınıfına sahip birden çok öğe içindir.
.border-blue .background { ... }".background" un ".border-blue" alt öğesi olduğu bir öğe içindir.

Daha kapsamlı bir açıklama için Chris'in cevabına bakın .

Birisi benim yaptığım gibi tökezlediğinde ve fark etmediğinde, yukarıdaki iki varyasyon farklı kullanım durumları içindir.

Devamındaki:

.blue-border, .background {
    border: 1px solid #00f;
    background: #fff;
}

mavi kenarlık veya arka plan sınıfına sahip öğelere stil eklemek istediğinizde kullanılır, örneğin:

<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>

hepsine mavi bir kenarlık ve beyaz arka plan uygulanacaktır.

Ancak kabul edilen cevap farklıdır.

.blue-border.background {
    border: 1px solid #00f;
    background: #fff;
}

Bu, stilleri her iki sınıfa sahip öğelere uygular, bu nedenle bu örnekte yalnızca <div>her iki sınıfa sahip olan stillerin uygulanmasını sağlamalıdır (CSS'yi doğru şekilde yorumlayan tarayıcılarda):

<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>

Yani temelde şöyle düşünün, virgülle ayırma bir sınıf VEYA başka bir sınıfa sahip öğeler için geçerlidir ve nokta ayırma bir sınıf VE başka bir sınıfa sahip öğeler için geçerlidir .