Không thể tìm thấy bộ chọn thuộc tính css "không bằng"

Tôi muốn nhắm mục tiêu các phần tử div trong đó thuộc tính "foo" có giá trị.

<div foo="x">XXX</div>
<div foo="">YYY</div>

Tôi đã thử css này, nhưng nó không hoạt động:

[foo!='']
{
   background: red;
}

Sử dụng mã như sau:

div:not([foo=''])
{
    /* CSS Applied to divs having foo value Not nothing (or having a foo value assigned) */
}

:not([foo=''])
{
    background: red;
}

http://jsfiddle.net/gsLvuys0/

Một vấn đề với câu trả lời được chấp nhận là nó cũng sẽ chọn các phần tử không có foothuộc tính nào cả. Xem xét:

<div>No foo</div>
<div foo="">Empty foo</div>
<div foo="x">XXX</div>
<div foo="y">YYY</div>
<div foo="z">ZZZ</div>

div:not([foo=''])sẽ chọn cả phần tử đầu tiên và divphần tử thứ hai . Nếu bạn chỉ muốn divcác phần tử có foo thuộc tính được đặt thành một chuỗi rỗng, bạn nên sử dụng:

div[foo]:not([foo=''])

Nếu bạn muốn tất cả các phần tử có thuộc tính fookhông ycũng như không z, bạn nên sử dụng:

div[foo]:not([foo='y']):not([foo='z'])

Bạn có thể chọn cái đầu tiên bằng cách sử dụng

[foo = 'x']{
  background:red;
}

VĨ CẦM

Đọc này