Es kann kein CSS-Attributselektor gefunden werden, der nicht gleich ist

Ich möchte auf div-Elemente abzielen, bei denen das Attribut "foo" einen Wert hat.

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

Ich habe dieses CSS ausprobiert, aber es funktioniert nicht:

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

Verwenden Sie den Code wie folgt:

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/

Ein Problem mit der akzeptierten Antwort besteht darin, dass auch Elemente ausgewählt werden, die überhaupt kein fooAttribut haben. Erwägen:

<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=''])wählt sowohl das erste als auch das zweite divElement aus. Wenn Sie nur divElemente mit einem Attribut foo möchten , das auf eine leere Zeichenfolge festgelegt ist, sollten Sie Folgendes verwenden:

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

Wenn Sie alle Elemente mit einem Attribut möchten foo, das weder ynoch ist z, sollten Sie Folgendes verwenden:

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

Sie können den ersten mit auswählen

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

GEIGE

Lesen Sie dies