Bạn có thể nhắm mục tiêu một phần tử chỉ với CSS nếu có 2 lớp không?

Như bạn có thể đã biết, bạn có thể có nhiều lớp trên các phần tử được phân tách bằng dấu cách.

Thí dụ

<div class="content main"></div>

Và với CSS, bạn có thể nhắm mục tiêu điều đó divbằng .contenthoặc .main. Có cách nào để nhắm mục tiêu nó nếu và chỉ khi cả hai lớp đều có mặt không?

Thí dụ

<div class="content main">I want this div</div>
<div class="content">I don't care about this one</div>
<div class="main">I don't want this</div>

Tôi sẽ sử dụng công cụ chọn CSS nào để chỉ lấy cái đầu tiên div(giả sử tôi không thể sử dụng .content:first-childhoặc tương tự)?

Vâng, chỉ tiếp nhau chúng: .content.main. Xem bộ chọn lớp CSS .

Nhưng lưu ý rằng Internet Explorer lên đến phiên bản 6 không hỗ trợ nhiều bộ chọn lớp và chỉ tôn vinh tên lớp cuối cùng.

Chỉ vì lợi ích của nó (tôi không thực sự khuyên bạn nên làm điều này), có là một cách khác để làm điều đó:

.content[class~="main"] {}

Hoặc là:

.main[class~="content"] {}

Tham khảo: http://www.w3.org/TR/CSS2/selector.html

E [foo ~ = "warning"] Khớp với bất kỳ phần tử E nào có giá trị thuộc tính "foo" là danh sách các giá trị được phân tách bằng dấu cách , một trong số đó chính xác bằng "warning"

Demo: http://jsfiddle.net/eXrSg/

Tại sao điều này thực sự hữu ích (ít nhất là cho IE6):

Do IE6 không hỗ trợ nhiều lớp nên chúng ta không thể sử dụng .content.main, tuy nhiên có một số thư viện javascript như IE-7.js cho phép bộ chọn thuộc tính, nhưng dường như vẫn không thành công khi sử dụng nhiều lớp. Tôi đã thử nghiệm cách giải quyết này trong IE6 với javascript cho phép bộ chọn thuộc tính và nó rất xấu, nhưng nó hoạt động.

Tôi vẫn chưa tìm thấy tập lệnh nào giúp IE6 hỗ trợ nhiều bộ chọn lớp nhưng đã tìm thấy nhiều bộ cho phép bộ chọn thuộc tính. Nếu ai đó biết cách nào đó hoạt động , vui lòng cho tôi biết trong phần nhận xét để tôi có thể loại bỏ cách giải quyết này.