CSS-Selektor mit Punkt in ID

Die HTML-Spezifikation erlaubt Punkte (.) In einer ID:

<img id="some.id" />

Die Verwendung einer CSS-ID-Auswahlregel stimmt jedoch nicht richtig überein:

#some.id { color: #f00; }

In der CSS-Spezifikation für ID-Selektoren wird dieser Fall nicht erwähnt. Ich gehe also davon aus, dass die Kombination aus Tag-Name und Klassenauswahl verwendet wird . Beispielsweise würde eine CSS-Regel von a.classNamefür alle Ankertags ( <a>) mit dem Klassennamen classNamelike gelten <a class="className"></a>.

Ist es möglich, eine externe CSS-Dateiregel zu haben, die auf ein HTML-Element anhand seiner ID verweist, die einen Punkt enthält?

Ich erwarte dies nicht, da die CSS-Spezifikation angibt, dass ein CSS- " Bezeichner " den Punkt nicht als gültiges Zeichen enthält. Ist dies also eine grundlegende Nichtübereinstimmung zwischen HTML- und CSS-Spezifikationen? Ist meine einzige Alternative, eine andere Art der CSS-Auswahl zu verwenden? Kann jemand schlauer als ich dies bestätigen oder leugnen?

(Ich würde den Punkt aus dem HTML-ID-Attribut entfernen, um die Dinge zu vereinfachen, aber es ist eine vom System generierte ID, sodass ich sie in diesem Fall nicht ändern kann.)

html css css-selectors Jon Adams
quelle

Man könnte sagen, dass dies ein grundlegendes Missverhältnis zwischen HTML und CSS ist. Da es sich jedoch um zwei verschiedene Sprachen handelt, wird nicht erwartet, dass sie übereinstimmen. Ein HTML-Bezeichner ist ein HTML-Bezeichner, während ein CSS-Bezeichner ein CSS-Bezeichner ist. CSS kann auch andere Sprachen formatieren, nicht nur HTML (obwohl dies selbstverständlich ist, wurde CSS am Anfang für HTML erstellt).

BoltClock

Auch #some.idist die Kombination aus ID und Klassenauswahl verwenden.

BoltClock

Ist die ID das einzige Attribut, das Sie als Style-Hook haben? Ich weiß, dass es ein wenig vom Thema abweicht, aber ich frage mich, warum Sie eine ID anstelle von img oder einer Klasse (falls verfügbar) verwenden möchten.

Jayx

@ Jayx RE "Warum eine ID anstelle von img (Tag) oder einer Klasse verwenden?" Es variiert aus vielen Gründen und Situationen. In diesem Fall musste jedoch ein bestimmtes Element gestylt werden, nicht alle Bilder auf der Seite. Eine Klasse hätte verwendet werden können, wenn der HTML-Code geändert werden könnte. In diesem Fall konnte er jedoch nicht geändert werden, da er von einem System generiert wurde, das außerhalb unserer Kontrolle liegt.

Jon Adams

Antworten:

194

Klassisch. Kurz nachdem ich alle Spezifikationen durchgearbeitet hatte, in denen die Frage geschrieben war, las ich sie noch einmal durch und stellte fest, dass es einen Fluchtcharakter gibt. Ich habe es noch nie gebraucht, aber die CSS-Spezifikation erlaubt es, dass Backslash (\) wie in den meisten Sprachen maskiert wird. Was weißt du?

In meinem Beispiel würde also die folgende Regel übereinstimmen:

#some\.id { color: #f00; }

Jon Adams
quelle

Gute Forschungsarbeit. Es sollte mehr Fragen und Antworten wie diese geben, nicht wie „Schreibe meinen Code anstelle von mir“.

Pavlo

nette Forschung. Ich bin gerade in einer großen Unternehmensanwendung darauf gestoßen, an der ich arbeite. Ich war total ratlos und habe es noch nie gesehen. Was bringt es, eine ID mit einem Punkt darin zu erstellen?

Anthony

@Anthony: Es gibt keinen bestimmten Grund, einen Punkt in ein HTML-ID-Attribut einzufügen. Ich denke manchmal wollen Autoren nur? Vielleicht kann es in einigen Fällen zu einem Überlaufen der zugrunde liegenden Implementierungssysteme kommen, die möglicherweise Punkte in den Kennungen des serverseitigen Codes für die Formularverarbeitung verwenden? Ich bin sicher, dass jeder, der dies tut, seine eigenen Gründe hat. Es gibt jedoch keinen HTML / CSS-Grund, sie einzuschließen.

Jon Adams

Vielen Dank, ich hatte Probleme mit OpenLayers, da es Punkte in seinen IDs verwendet. Zum Beispiel: "OpenLayers.Control.Attribution_7". Ich denke, es hilft beim internen Code, wenn der Name der Javascript-Variablen den gleichen Wert wie die ID selbst haben kann.

Hoffmann

Ich überlegte, eine neue Frage hinzuzufügen und meine eigene Antwort zu schreiben, beschloss aber, hier nur einen Kommentar abzugeben. Wenn Sie den Stylus-Präprozessor verwenden, müssen Sie zwei Backslashes verwenden, z. B. #some\\.idum dem Sonderzeichen zu entkommen. Der erste Backslash wird von Stylus verwendet, wobei der verbleibende Backslash im kompilierten CSS verbleibt, wodurch das in dieser Antwort beschriebene gewünschte Ergebnis erzielt wird.

Markrian

Sie können auch img [id = some.id]] verwenden.

Weitere Infos hier: http://www.w3.org/TR/selectors/#attribute-selectors

SDD512
quelle

Dies funktioniert möglicherweise in einigen Browsern, aber ich habe auch Fehler bei Attributselektoren gesehen. Sie können immer noch entkommen ., als \.ob.

Chris Jaynes