Nie można znaleźć selektora atrybutu CSS „nierówne”

Chcę kierować reklamy na elementy div, w których atrybut „foo” ma wartość.

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

Próbowałem tego css, ale nie działa:

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

Użyj kodu w ten sposób:

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/

Jednym z problemów z zaakceptowaną odpowiedzią jest to, że wybierze również elementy, które w ogóle nie mają fooatrybutu. Rozważać:

<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=''])wybierze zarówno pierwszy, jak i drugi divelement. Jeśli chcesz tylko divelementy, które mają atrybut foo, który jest ustawiony na pusty ciąg, powinieneś użyć:

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

Jeśli chcesz, aby wszystkie elementy miały atrybut, fooktóry nie jest równy yani z, powinieneś użyć:

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

Możesz wybrać pierwszy za pomocą

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

SKRZYPCE

Przeczytaj to