CSS Selector ที่ใช้กับองค์ประกอบที่มีสองคลาส

มีวิธีในการเลือกองค์ประกอบที่มี CSS ตามค่าของแอตทริบิวต์ class ที่กำหนดเป็นสองคลาสเฉพาะหรือไม่ ตัวอย่างเช่นสมมติว่าฉันมี 3 divs:

<div class="foo">Hello Foo</div>
<div class="foo bar">Hello World</div>
<div class="bar">Hello Bar</div>

CSS ใดที่ฉันสามารถเขียนเพื่อเลือกเฉพาะองค์ประกอบที่สองในรายการโดยขึ้นอยู่กับความจริงที่ว่ามันเป็นสมาชิกของทั้งชั้นเรียน foo และบาร์?

เชื่อมโยงตัวเลือกคลาสทั้งสอง (โดยไม่มีช่องว่างระหว่าง):

.foo.bar {
    /* Styles for element(s) with foo AND bar classes */
}

หากคุณยังต้องจัดการกับเบราว์เซอร์โบราณอย่าง IE6 โปรดทราบว่ามันไม่ได้อ่านตัวเลือกคลาสที่ถูกผูกมัดอย่างถูกต้อง: มันจะอ่านตัวเลือกคลาสล่าสุดเท่านั้น( .barในกรณีนี้) แทนโดยไม่คำนึงถึงคลาสอื่น ๆ

เพื่อแสดงให้เห็นว่าเบราว์เซอร์อื่น ๆ และ IE6 ตีความสิ่งนี้อย่างไรให้พิจารณา CSS นี้:

* {
    color: black;
}

.foo.bar {
    color: red;
}

ผลลัพธ์บนเบราว์เซอร์ที่รองรับคือ:

<div class="foo">Hello Foo</div>       <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div>       <!-- Not selected, black text [3] -->

เอาต์พุตบน IE6 คือ:

<div class="foo">Hello Foo</div>       <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div>       <!-- Selected, red text [2] -->

เชิงอรรถ:

• เบราว์เซอร์ที่รองรับ:
  1. ไม่ได้เลือกเนื่องจากองค์ประกอบนี้มีคลาสfooเท่านั้น
  2. เลือกเป็นองค์ประกอบนี้มีทั้งการเรียนและfoobar
  3. ไม่ได้เลือกเนื่องจากองค์ประกอบนี้มีคลาสbarเท่านั้น
     
     
• IE6:
  1. ไม่ได้เลือกbarเป็นองค์ประกอบนี้ไม่ได้มีระดับ
  2. เลือกเป็นองค์ประกอบนี้มีคลาสbarโดยไม่คำนึงถึงคลาสอื่น ๆ ที่ระบุไว้