Wie lauten die Regeln für Leerzeichen in Attributselektoren?

Question

Ich lese gerade die Spezifikation von Attributselektoren aber ich kann nichts finden, was besagt, ob Leerzeichen erlaubt sind. Ich nehme an, dass es am Anfang, vor und nach dem Operator und am Ende erlaubt ist. Ist das richtig?

Answer 1

Die Regeln für Leerzeichen in Attributselektoren sind in der Grammatik festgelegt. Hier ist die Selektoren 3 Produktion für Attributselektoren (einige Token wurden zur Veranschaulichung durch ihre Zeichenkettenäquivalente ersetzt; S* steht für 0 oder mehr Leerzeichen):

attrib
  : '[' S* [ namespace_prefix ]? IDENT S*
        [ [ '^=' |
            '$=' |
            '*=' |
            '=' |
            '~=' |
            '|=' ] S* [ IDENT | STRING ] S*
        ]? ']'
  ;

Natürlich ist die Grammatik nicht sonderlich nützlich für jemanden, der verstehen will, wie man schreiben. Attributselektoren, da es für jemanden gedacht ist, der Implementierung einen Wählermotor.

Hier eine leicht verständliche Erklärung:

Whitespace vor dem Attributselektor

Dies wird in der obigen Produktion nicht behandelt, aber die erste offensichtliche Regel ist, dass wenn Sie einen Attributselektor an einen anderen einfachen Selektor oder ein Pseudoelement anhängen, nicht ein Leerzeichen verwenden:

a[href]::after

Wenn Sie dies tun, wird der Raum als Kombinatorische Nachkommenschaft statt, wobei der universelle Selektor auf den Attributselektor und alles, was ihm folgt, angewendet wird. Mit anderen Worten: Diese Selektoren sind einander gleichwertig, unterscheiden sich aber von den oben genannten:

a [href] ::after
a *[href] *::after

Leerzeichen innerhalb des Attributselektors

Ob Sie Leerzeichen innerhalb der Klammern und um den Vergleichsoperator herum haben, spielt keine Rolle; ich habe festgestellt, dass die Browser sie so behandeln, als wären sie nicht vorhanden (aber ich habe es nicht ausgiebig getestet). Diese sind alle gemäß der Grammatik gültig und funktionieren, soweit ich gesehen habe, in allen modern Browsern:

a[href]
a[ href ]
a[ href="http://stackoverflow.com" ]
a[href ^= "http://"]
a[ href ^= "http://" ]

Leerzeichen sind nicht erlaubt zwischen dem ^ (oder ein anderes Symbol) und = da diese als ein einziges Token behandelt werden, und Token können nicht auseinandergebrochen werden.

Wenn IE7 und IE8 die Grammatik korrekt implementieren, sollten sie in der Lage sein, sie alle zu verarbeiten.

Wenn ein Namensraum-Präfix verwendet wird, ist zwischen dem Präfix und dem Attributnamen kein Leerzeichen erlaubt.

Diese sind falsch:

unit[sh| quantity]
unit[ sh| quantity="200" ]
unit[sh| quantity = "200"]

Diese sind korrekt:

unit[sh|quantity]
unit[ sh|quantity="200" ]
unit[sh|quantity = "200"]

Leerzeichen innerhalb des Attributwerts

Beachten Sie jedoch die Anführungszeichen um die obigen Attributwerte; wenn Sie diese weglassen und versuchen, etwas auszuwählen, dessen Attribut Leerzeichen in seinem Wert enthält, haben Sie einen Syntaxfehler.

Dies ist falsch:

div[class=one two]

Das ist richtig:

div[class="one two"]

Dies liegt daran, dass ein nicht in Anführungszeichen gesetzter Attributwert als Bezeichner behandelt wird, der (aus offensichtlichen Gründen) keine Leerzeichen enthält, während ein in Anführungszeichen gesetzter Wert als Zeichenkette behandelt wird. Siehe diese Spezifikation für weitere Einzelheiten.

Um solche Fehler zu vermeiden, empfehle ich dringend, Attributwerte immer zu zitieren, ob in HTML, XHTML (erforderlich), XML (erforderlich), CSS oder jQuery ( einmal erforderlich ).

Leerzeichen nach dem Attributwert

Seit Selectors 4 (nach der ursprünglichen Veröffentlichung dieser Antwort) können Attributselektoren Flags in Form eines Bezeichners akzeptieren, der hinter dem Attributwert steht. Es wurden zwei Flags definiert, die sich auf Folgendes beziehen Charakterfall , eine für den Abgleich ohne Berücksichtigung der Groß- und Kleinschreibung:

div[data-foo="bar" i]

Und eine für den Abgleich unter Berücksichtigung der Groß- und Kleinschreibung (deren Zusatz Ich hatte eine Rolle in (wenn auch in Vertretung der WHATWG):

ol[type="A" s]
ol[type="a" s]

Die Grammatik wurde aktualisiert also:

attrib
  : '[' S* attrib_name ']'
    | '[' S* attrib_name attrib_match [ IDENT | STRING ] S* attrib_flags? ']'
  ;

attrib_name
  : wqname_prefix? IDENT S*

attrib_match
  : [ '=' |
      PREFIX-MATCH |
      SUFFIX-MATCH |
      SUBSTRING-MATCH |
      INCLUDE-MATCH |
      DASH-MATCH
    ] S*

attrib_flags
  : IDENT S*

Im Klartext: Wenn der Attributwert nicht in Anführungszeichen steht (d. h. es handelt sich um einen Bezeichner), wird zwischen ihm und attrib_flags ist erforderlich; andernfalls, wenn der Attributwert in Anführungszeichen gesetzt wird, ist das Leerzeichen optional, wird aber aus Gründen der Lesbarkeit dringend empfohlen. Leerzeichen zwischen attrib_flags und die schließende Klammer ist wie immer optional.