Bộ chọn CSS có lớp a nhưng không phải lớp b

Question

Tôi đã thử tất cả mọi thứ nhưng tôi nghĩ rằng tôi đang trở nên quá phức tạp và thậm chí còn quản lý để có được chrome để treo với bộ chọn của tôi. Tôi chắc chắn theres một cách đơn giản để làm điều này

Chọn classa nhưng chỉ khi theres không có classb và bỏ qua những ví dụ cuối cùng của nó

<div class="container"> 
    <div class="classa classb"></div> <!-- Dont Select --> 
    <div class="classa"></div> <!-- Select --> 
    <div class="classa"></div> <!-- Dont select last instance --> 
</div> 

Answer 1

Tôi tin rằng bạn có thể làm điều này với CSS3 sử dụng :not() chọn (ví dụ here)

div.classa:not(.classb):not(:last-child) {}

Tuy nhiên, như bạn đã biết, không có nhiều trình duyệt hỗ trợ này, vì vậy Javascript có thể là một cách dễ dàng hơn ..

Answer 2

Với CSS3 pseudo classes:

.classa:not(:last-child):not(.classb) { 
    // some rules... 
} 

Answer 3

.classa:not(.classb):not(:last-child) { 
    /* rules */ 
} 

Thử nghiệm trên Firefox 12, Chrome 19, Safari 5 và Opera 10. Thật không may nó không hoạt động (... đoán ai?) IE.

Answer 4

Hãy thử:

.classa:not(.classb):first-child { 
    background: red; 
} 

này sẽ không làm việc trong IE 7 hoặc 8 mặc dù.