CSS Selector áp dụng cho các phần tử có hai lớp

Có cách nào để chọn một phần tử với CSS dựa trên giá trị của thuộc tính lớp được đặt thành hai lớp cụ thể. Ví dụ: giả sử tôi có 3 div:

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

CSS nào tôi có thể viết để chọn CHỈ phần tử thứ hai trong danh sách, dựa trên thực tế rằng nó là thành viên của cả hai lớp foo AND?

Xâu chuỗi cả hai bộ chọn lớp (không có khoảng trắng ở giữa):

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

Nếu bạn vẫn phải đối phó với các trình duyệt cổ như IE6, hãy lưu ý rằng nó không đọc chính xác các bộ chọn lớp xích: nó sẽ chỉ đọc bộ chọn lớp cuối cùng ( .bartrong trường hợp này), bất kể bạn liệt kê các lớp khác.

Để minh họa cách các trình duyệt khác và IE6 diễn giải điều này, hãy xem xét CSS này:

* {
    color: black;
}

.foo.bar {
    color: red;
}

Đầu ra trên các trình duyệt được hỗ trợ là:

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

Đầu ra trên IE6 là:

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

Chú thích:

• Các trình duyệt được hỗ trợ:
  1. Không được chọn vì phần tử này chỉ có lớp foo.
  2. Được chọn là phần tử này có cả hai lớp foovà bar.
  3. Không được chọn vì phần tử này chỉ có lớp bar.
     
     
• IE6:
  1. Không được chọn vì phần tử này không có lớp bar.
  2. Được chọn là thành phần này có lớp bar, bất kể các lớp khác được liệt kê.