กำหนดเป้าหมายองค์ประกอบที่มีหลายคลาสภายในกฎเดียว

ฉันมี HTML บางส่วนที่จะมีองค์ประกอบที่มีหลายคลาสและฉันจำเป็นต้องกำหนดองค์ประกอบเหล่านี้ภายในกฎเดียวเพื่อให้คลาสเดียวกันอาจแตกต่างกันภายในคอนเทนเนอร์ที่แตกต่างกัน สมมติว่าฉันมีสิ่งนี้ใน CSS ของฉัน:

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

จากนั้นฉันมีสิ่งนี้ใน HTML ของฉัน:

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

ฉันสามารถกำหนดเป้าหมายสิ่งเหล่านี้ภายในกฎเดียวได้หรือไม่ เช่นนี้ซึ่งฉันรู้ว่าใช้ไม่ได้:

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

.border-blue.background { ... }มีไว้สำหรับรายการเดียวที่มีหลายชั้นเรียน
.border-blue, .background { ... }มีไว้สำหรับหลายรายการโดยแต่ละรายการมีคลาสของตนเอง
.border-blue .background { ... }มีไว้สำหรับรายการหนึ่งโดยที่ ".background" คือลูกของ ".border-blue"

ดูคำตอบของ Chrisสำหรับคำอธิบายเพิ่มเติม

ในกรณีที่มีคนสะดุดกับสิ่งนี้เช่นเดียวกับฉันและไม่ทราบว่าสองรูปแบบข้างต้นเป็นกรณีการใช้งานที่แตกต่างกัน

ดังต่อไปนี้:

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

มีไว้สำหรับเมื่อคุณต้องการเพิ่มสไตล์ให้กับองค์ประกอบที่มีขอบสีน้ำเงินหรือคลาสพื้นหลังเช่น:

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

ทุกคนจะได้รับเส้นขอบสีน้ำเงินและพื้นหลังสีขาวที่ใช้กับพวกเขา

อย่างไรก็ตามคำตอบที่ยอมรับนั้นแตกต่างกัน

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

สิ่งนี้นำสไตล์ไปใช้กับองค์ประกอบที่มีทั้งสองคลาสดังนั้นในตัวอย่างนี้มีเพียง<div>คลาสทั้งสองเท่านั้นที่ควรนำสไตล์ไปใช้ (ในเบราว์เซอร์ที่ตีความ CSS อย่างถูกต้อง):

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

ดังนั้นโดยทั่วไปคิดว่ามันเช่นนี้แยกจุลภาคนำไปใช้กับองค์ประกอบที่มีชั้นหนึ่งหรือชั้นอื่นและจุดแยกนำไปใช้กับองค์ประกอบที่มีชั้นหนึ่งและชั้นอื่น