Umgang mit einem Doppelpunkt in einem Element-ID in einem CSS-Selektor [Duplicate]

Question

    

Diese Frage bereits eine Antwort hier:

    

        
•              So verwenden JSF HTML-Element-ID erzeugt mit Doppelpunkt „:“ in CSS-Selektoren                                      2 Antworten                          
    

    

JSF ist die Einstellung der ID eines Eingabefeldes search_form:expression. Ich brauche auf diesem Element etwas Styling zu geben, aber das Doppelpunkt sieht aus wie der Anfang eines Pseudo-Element an den Browser, so dass es als ungültig markiert wird und ignoriert. Gibt es trotzdem, den Doppelpunkt oder etwas zu entkommen?

input#search_form:expression {
  ///...
}

Answer 1

Aufkantung:

input#search_form\:expression {  ///...}

• Siehe auch Namespaces mit CSS mit (MSDN)

Answer 2

Mit einem umgekehrten Schrägstrich vor dem Doppelpunkt in vielen Versionen von IE nicht funktioniert (insbesondere 6 und 7; möglicherweise andere).

Eine Abhilfe ist, den Hexadezimal-Code für den Doppelpunkt zu verwenden - das ist \ 3A

Beispiel:

input#search_form\3A expression {  }

Dies funktioniert in allen Browsern: Inklusive IE6 + (? Und möglicherweise früher), Firefox, Chrome, Opera, etc. Es ist Teil des CSS2 Standard .

Answer 3

Dieser Artikel werden Ihnen sagen, wie jedes Zeichen in CSS zu entkommen.

Jetzt gibt es auch ein Werkzeug für sie: http://mothereff.in/css-escapes#0search% 5fform% 3Aexpression

TL; DR Alle anderen Antworten auf diese Frage nicht korrekt sind. Sie müssen sowohl den Unterstrich entkommen (IE6 zu verhindern, dass die Regel ganz in einigen Rand Fällen ignoriert wird) und den Doppelpunkt für die Wähler in verschiedenen Browsern richtig zu arbeiten.

Technisch kann der Doppelpunkt als \: entkommen, aber das im IE nicht funktioniert <8, so dass Sie \3a verwenden werden müssen:

#search\_form\3a expression {}

Answer 4

Sie können es mit einem Backslash

input#search_form\:expression {
  ///...
}

Von der CSS Spec

4.1.3 Zeichen und Fall

Die folgenden Regeln immer halten:

Alle CSS-Stylesheets sind Groß- und Kleinschreibung, mit Ausnahme von Teilen, die nicht unter der Kontrolle von CSS sind. Zum Beispiel schreibt die Groß- und Kleinschreibung Werte der HTML „id“ und „Klasse“, des Font-Namen, und von URIs liegt außerhalb des Geltungsbereichs dieser Spezifikation. Beachten Sie insbesondere, dass die Elementnamen Groß- und Kleinschreibung in HTML, aber case-sensitive in XML. In CSS Identifikatoren (einschließlich Elementnamen, Klassen und IDs in Selektoren) nur die Zeichen enthält, [A-Z0-9] und ISO 10646 Zeichen U + 00A1 und höher, und der Bindestrich (-) und der Unterstrich (_) ; sie können nicht mit einer Ziffer oder einem Bindestrich gefolgt von einer Ziffer beginnen. Identifiers kann auch enthalten Escape-Zeichen und jede ISO 10646 Zeichen als numerischen Code (siehe nächsten Punkt). Zum Beispiel der Kennung „B & W?“ kann geschrieben werden als "B \ & W \?" oder "B \ 26 W \ 3F". Beachten Sie, dass Unicode-Code-by-Code entspricht ISO 10646 (siehe [UNICODE] und [ISO10646]).

In CSS 2.1, ein Backslash-Zeichen () zeigen an drei Arten von Zeichen entkommen. Zuerst in einem String, ein Schrägstrich durch eine neue Zeile gefolgt ignoriert wird (das heißt, wird die Zeichenfolge als auch nicht den umgekehrten Schrägstrich oder die Neuen-Zeile enthält).

Zweitens bricht die Bedeutung von speziellen CSS-Zeichen. Jedes Zeichen (mit Ausnahme einer Hexadezimalzahl) mit einem Backslash geschützt werden, um seine besondere Bedeutung zu entfernen. Zum Beispiel: „\““ist eine Zeichenfolge, die aus einem doppelten Anführungszeichen. Stylesheet Preprozessoren nicht diese Schrägstriche aus einem Stylesheet entfernen müssen, da diese die Bedeutung des Stylesheet ändern würden.

Drittens Backslash Fluchten erlauben Autoren Zeichen beziehen sie sich nicht leicht in einem Dokument setzen. In diesem Fall wird die Backslash von höchstens sechs hexadezimalen Ziffern (0..9A..F) gefolgt, die mit dieser Nummer für die ISO 10646 ([ISO10646]) Zeichen stehen, die nicht Null sein muss. (Es ist nicht definiert, in CSS 2.1 Was ist, wenn ein Blatt Stil geschieht, ist ein Zeichen enthält, die mit Unicode Null Codepoint). Wenn ein Zeichen im Bereich [0-9a-f] die Zahl hexadezimal folgt, muss das Ende der Nummer gemacht werden klar. Es gibt zwei Möglichkeiten, das zu tun:

mit einem Raum (oder anderen Leerzeichen): "\ 26 B" ( "& B"). In diesem Fall sollten Benutzer behandeln, um ein "CR / LF" pair (U + 000D / U + 000A) als ein einzelnes Leerzeichen. um genau 6 Hexadezimalziffern Bereitstellen: "\ 000026B" ( "& B") In der Tat können diese beiden Methoden kombiniert werden. Nur ein Leerzeichen nach einer hexadezimalen Escape ignoriert. Beachten Sie, dass dies bedeutet, dass eine „echte“ Raum nach der Escape-Sequenz muss sich entweder entkommen oder verdoppelt werden.

Wenn die Anzahl außerhalb des Bereichs von Unicode erlaubt (z.B. „\ 110000“ über dem maximalen 10FFFF ist in aktueller Unicode erlaubt), kann das UA den Austritt mit den „Ersatzzeichen“ (U + FFFD) ersetzen. Wenn das Zeichen angezeigt werden soll, sollte der UA ein sichtbares Symbol zeigen, wie ein „fehlendes Zeichen“ Glyphe (vgl 15.2, Punkt 5).

Hinweis: Teil einer Kennung oder eine Zeichenfolge (dh „\ 7B“ Aufkantung entweicht, wo erlaubt, sind immer in Betracht gezogen wird, ist nicht Interpunktion, auch wenn „{“ ist, und „\ 32“ an dem erlaubten Start eines Klassennamens, auch wenn „2“ ist nicht). Die Kennung "te \ st" ist genau die gleiche Kennung wie "test".

Answer 5

Ich hatte das gleiche Problem mit Doppelpunkten, und ich war nicht in der Lage, sie zu ändern (könnte den Code outputing Doppelpunkte nicht zugreifen) und ich wollte, dass sie mit CSS3-Selektoren mit jQuery holen.

Ich habe es hier, weil es für jemanden nützlich sein könnte

input[id="something:something"] fein in jQuery Selektoren gearbeitet, und es könnte genauso gut in Sheets arbeiten (vielleicht Browser-Probleme haben)

Answer 6

In JSF 2.0, können Sie den Separator mit der web.xml-Datei als init-param von javax.faces.SEPARATOR_CHAR angeben

Lesen Sie diese:

• Ist es möglich, das Element zu ändern id Separator in JSF?

Answer 7

ich in einem ADF-Rahmen arbeiten, und ich oft habe JQuery verwenden, um Elemente auszuwählen. Dieses Format funktioniert für mich. Dies funktioniert in IE8 auch.

$('[id*="gantt1::majorAxis"]').css('border-top', 'solid 1px ' + mediumGray);

Answer 8

Ich fand nur dieses Format für mich für IE7 (Firefox auch) gearbeitet, und ich verwende JSF / ICEfaces 1.8.2.

Say form id=FFF, element id=EEE

var jq=jQuery.noConflict();
jq(document).ready(function() {
jq("[id=FFF:EEE]").someJQueryLibFunction({ jQuery lib function options go here })
});