CSS-Attributselektoren: Die Regeln für Anführungszeichen (", 'oder keine?)

70

Diese Frage nervt mich schon eine Weile. Beim Schreiben eines CSS-Selektors, der mit dem Attribut eines Elements wie folgt verglichen wird.

a[rel="nofollow"]

Ich weiß nie, was ich mit den Anführungszeichen machen soll. Sind sie wirklich notwendig?

Grundsätzlich, was ist die Spezifikation dafür, weil ich es nicht auf der Website finden kann.

Werden alle diese als gültig angesehen?

a[rel="nofollow"]
a[rel='nofollow']
a[rel=nofollow]
css string css-selectors Olical
quelle
Ich denke nicht, dass sie notwendig sind.
Headshota
@ Headshota: Nicht in genau diesem Fall, nein.
Mathias Bynens
Mothereff.in/unquoted-attributes#nofollow
Mathias Bynens

Antworten:

77

Ich habe hier ausführlicher zu diesem Thema geschrieben: Nicht zitierte Attributwerte in HTML und CSS .

Ich habe auch ein Tool erstellt, mit dem Sie Ihre Frage beantworten können: http://mothereff.in/unquoted-attributes

Validator für nicht zitierte Attributwerte

Sie können die Anführungszeichen normalerweise weglassen, solange der Attributwert alphanumerisch ist (es gibt jedoch einige Ausnahmen - alle Details finden Sie im verlinkten Artikel). Wie auch immer, ich finde es eine gute Praxis, die Anführungszeichen trotzdem hinzuzufügen, falls Sie sie benötigen, dh a[href^=http://]nicht funktionieren, aber a[href^="http://"]werden.

Der Artikel, den ich erwähnt habe, enthält Links zu den entsprechenden Kapiteln in der CSS-Spezifikation.

Mathias Bynens
quelle
1
Das wollte ich wissen. Obwohl der Anser von BoltClock auch sehr hilfreich ist. Dies verdeutlicht, was mein RegExp durchlassen muss.
Olical
@ Wolfy87 Meine Antwort wurde mit einem Link zu einem Artikel aktualisiert, den ich neulich geschrieben habe. Es enthält einige reguläre Ausdrücke :)
Mathias Bynens
2
(Wiedergabe meiner Antwort als Kommentar, da ich sie vor einiger Zeit gelöscht habe.) Aus praktischer Sicht: Ich würde empfehlen, einfache oder doppelte Anführungszeichen zu verwenden. Auf diese Weise müssen keine speziellen Auswahlzeichen innerhalb der Attributwerte (außer den Anführungszeichen selbst) maskiert werden. Außerdem - und dies ist nur eine persönliche Präferenz für den Codierungsstil, nehmen Sie also nicht mein Wort - finde ich, dass dies mit Anführungszeichen für XHTML-Attribute übereinstimmt.
BoltClock
1
@ BoltClock'saUnicorn Amen dazu. Tun Sie sich selbst einen Gefallen und verwenden Sie nur Anführungszeichen, es erspart Ihnen viele Kopfschmerzen!
Mathias Bynens
2
Beeindruckt ist diese Seite nach 7 Jahren immer noch aktiv :-)
Simon_Weaver
27

Attributwerte müssen Bezeichner oder Zeichenfolgen sein

- http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

Die ersten beiden verwenden Zeichenfolgen. Der dritte verwendet eine Kennung.

Bezeichner (einschließlich Elementnamen, Klassen und IDs in Selektoren) dürfen nur die Zeichen [a-zA-Z0-9] und ISO 10646-Zeichen U + 00A0 und höher sowie den Bindestrich (-) und den Unterstrich (_) enthalten. Sie können nicht mit einer Ziffer, zwei Bindestrichen oder einem Bindestrich gefolgt von einer Ziffer beginnen.

- http://www.w3.org/TR/CSS2/syndata.html#value-def-identifier

Zeichenfolgen können entweder in doppelte oder einfache Anführungszeichen geschrieben werden.

- http://www.w3.org/TR/CSS2/syndata.html#strings

QUentin
quelle
3
Könnte auch
Mathias Bynens
CSS2 ist eigentlich hilfreicher, weil ich gerade eine CSS2-Selector-Engine schreibe. CSS2 ist also besser für mich, aber trotzdem danke für den Link.
Olical