Cách chọn phần tử chỉ chứa lớp "foobar", không chọn nếu nó chứa bất kỳ lớp nào khác không?

Question

Tôi chỉ muốn chọn phần tử nếu nó có một lớp và lớp đó là 'foobar'.

<style> 
.foobar { 
    /* only apply to an element if the element has a class and the only class is 'foobar'. */ 
    background: black; 
    color: white; 
} 
</style> 

<div class="foobar">i should be selected</div> 

<div class="foobar ipsum">i should not be selected</div> 

Tôi biết tôi có thể chọn nó bằng cách thêm một phong cách cho .foobar.ipsum {làm một việc} và .foobar {something else} nhưng tôi không có quyền kiểm soát các lớp bổ sung. Về cơ bản khi phần tử chỉ có lớp foobar, tôi biết đó là phần tử của tôi và đến từ một nơi khác. Đây là những gì xảy ra khi thế giới Thư viện CSS va chạm. Tôi biết rằng có những vấn đề sâu sắc hơn để giải quyết ở đây nhưng điều này đang làm tôi bối rối ngay bây giờ.

Answer 1

Cách đơn giản với CSS tinh khiết là sử dụng một bộ chọn thuộc tính:

[class="foobar"] { 
    /* only apply to an element if the element has a class and the only class is 'foobar'. */ 
    background: black; 
    color: white; 
} 

Bạn không thể kiểm soát được các yếu tố khác, nhưng nếu bạn có quyền kiểm soát của bạn và bạn có thể thay đổi thuộc tính class của nó, mayabelle makes a good point về việc chỉ định phần tử của bạn cho lớp đặc biệt của riêng nó và thay vào đó hãy chọn lớp đó. Bằng cách đó bạn tuyên bố rõ ràng yếu tố nào là của bạn thay vì đi theo giả thiết rằng không có các lớp bổ sung có nghĩa là nó là của bạn.

Answer 2

Bạn sẽ cần phải sử dụng một attribute selector:

[class="foobar"] { 
    background: black; 
} 

http://jsfiddle.net/dA2dp/

Answer 3

Nếu đó là "yếu tố của bạn", bạn có thể áp dụng một lớp bổ sung cho nó? Sau đó, bạn có thể chọn bằng cách sử dụng:

<style> 
.foobar.yourClass { 
    /* your css */ 
} 
</style> 

<div class="foobar yourClass">i should be selected</div> 
<div class="foobar ipsum">i should not be selected</div>