ไม่พบตัวเลือกแอตทริบิวต์ css ที่“ ไม่เท่ากัน”

ฉันต้องการกำหนดเป้าหมายองค์ประกอบ div โดยที่แอตทริบิวต์ "foo" มีค่า

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

ฉันได้ลอง css นี้แล้ว แต่ไม่ได้ผล:

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

ใช้รหัสดังนี้:

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/

ปัญหาอย่างหนึ่งของคำตอบที่ได้รับการยอมรับคือจะเลือกองค์ประกอบที่ไม่มีfooแอตทริบิวต์เลย พิจารณา:

<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=''])จะเลือกทั้งdivองค์ประกอบแรกและองค์ประกอบที่สอง หากคุณต้องการเฉพาะdivองค์ประกอบที่มีแอตทริบิวต์ foo ที่ตั้งค่าเป็นสตริงว่างคุณควรใช้:

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

หากคุณต้องการองค์ประกอบทั้งหมดที่มีแอตทริบิวต์fooที่ไม่ใช่yหรือzคุณควรใช้:

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

คุณสามารถเลือกรายการแรกโดยใช้

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

ซอ

อ่านนี่