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

102

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;
}
css Adrian Rosca
quelle
2
w3schools.com/cssref/sel_not.asp
aniskhan001

Antworten:

173

Verwenden Sie den Code wie folgt:

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

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'])
moomoo
quelle
1

Sie können den ersten mit auswählen 

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

GEIGE

Lesen Sie dies

Sunil Hari
quelle
Angenommen, es gibt 100 Divs, von denen der foo-Wert für 50 Divs fehlt (foo = ''), und andere 50 Divs haben einen anderen foo-Wert, z. B. foo = x oder y usw. Dann müssen Sie 50 Selektoren schreiben, wenn wir der obigen Lösung folgen
Shoaib Chikate
2
Das ist nicht die Op will: "Ich möchte nur die erste der folgenden Divs mit einem CSS-Attribut-Selektor anvisieren"
Sunil Hari
Ihre Antwort stimmt mit seiner Forderung überein, aber nicht mit einer allgemeinen Lösung, die andere Leute gegeben haben.
Shoaib Chikate
@ShoaibChikate Du hast recht. Ich möchte die allgemeinere Lösung. Ich habe die Frage aktualisiert, um dies widerzuspiegeln.
Adrian Rosca