Styling mit CSS2 wenn attr nicht gesetzt
-
20-09-2019 - |
Frage
Styling ein Element mit einem Attribut-Set ist einfach:. E[attr]
Gibt es eine Möglichkeit, um Stil ein Element mit CSS2 bezogen auf das Fehlen eines Attributs, so etwas wie dieses E[!attr]
? (JavaScript-Lösung ist keine Option).
Zum Beispiel gibt es mehrere Klassenregeln von id Regel befolgt:
.abc {padding:1em;}
.def {padding:2em;}
#n a {padding:0;}
Der HTML-Code ist:
<div id="n"><a href="" class="abc">.</a><a href="" class="def">.</a></div>
Klassen abc
und def
haben lowerer Priorität gegen ID-ed Regel so beide a
0 haben padding Ich kann nicht die Reihenfolge der oben genannten Regeln ändern, aber ich kann id-ed Regel ändern meine eigenen Regeln hinzufügen. Ich möchte Regeln wie #n a.abc
zu vermeiden, für jede Klasse zu schreiben (es sind viele). Stattdessen muss ich so etwas wie #n a[!class]
alle Klasse-ed halten a
s intakt.
Lösung
Leider nicht in CSS2. Das Beste, was Sie tun können, ist Ihre Erklärungen kaskadieren:
E {color: red}
E[attr] {color: blue}
Aber selbst kann dies nicht wirklich verlassen, da IE6 nicht Ehre Attributselektoren.
In CSS3 allerdings gibt es die schöne ": nicht" Pseudo-Selektor ( http://www.w3.org/TR/css3-selectors/#negation ).
EDIT
Vielen Dank für die Klärung. Wie wäre es:
.abc {padding:1em; !important} .def{padding:2em; !important}
#n a{padding: 1em}
Andere Tipps
Ich glaube nicht, dies kann in CSS2 erfolgen. In CSS3, dann würden Sie die "nicht" Syntax :
input:not([type="file"])