Wie formatiere ich JSF-Komponenten mit Doppelpunkt enthaltenden IDs in CSS?

So zielen Sie auf JSF-generierte Bezeichner mit Doppelpunkten in CSS-Selektoren ab

In JSF-Anwendungen können Komponenten mit Client-IDs gerendert werden, die Doppelpunkte enthalten. wie „phoneForm:phoneTable.“ Diese Doppelpunkte können mit der Syntax von CSS-Selektoren in Konflikt stehen, die Doppelpunkte zur Angabe von Pseudoklassen verwenden.

1. Escape den Doppelpunkt:

Escape den Doppelpunkt mit einem Backslash (). Dies funktioniert in den meisten Browsern.

#phoneForm\:phoneTable {
    background: pink;
}

2. Verwenden Sie einen Backslash mit Leerzeichen-Escape:

In IE6/7 erfordert der Escape-Doppelpunkt ein abschließendes Leerzeichen.

#phoneFormA phoneTable {
    background: pink;
}

3. Ein natives Element einschließen:

Wickeln Sie die JSF-Komponente in ein reguläres HTML-Element ein und wenden Sie Stile auf den Wrapper an.

<h:form>

#phoneField table {
    background: pink;
}

4. Verwenden Sie stattdessen eine Klasse:

Weisen Sie der Komponente eine CSS-Klasse anstelle einer ID zu. Dadurch wird das Dickdarmproblem beseitigt.

<h:dataTable>

.pink {
    background: pink;
}

5. JSF-Trennzeichen ändern (JSF 2.x):

Ändern Sie das JSF UINamingContainer-Trennzeichen in web.xml in einen Bindestrich (-) anstelle eines Doppelpunkts.

<context-param>
    <param-name>javax.faces.SEPARATOR_CHAR</param-name>
    <param-value>-</param-value>
</context-param>

#phoneForm-phoneTable {
    background: pink;
}

6. Voranstellen der Formular-ID deaktivieren (JSF 1.2):

Voranstellen der Formular-ID vor Komponenten-IDs deaktivieren. Dies kann jedoch zu Problemen bei der AJAX-Verarbeitung führen und wird nicht empfohlen.

    <h:dataTable>

#phoneTable {
    background: pink;
}

Empfehlung:

Verwenden Sie für Ihren speziellen Fall eine CSS-Klasse wie „phoneTable“ ist die am besten geeignete Lösung, da sie Flexibilität ermöglicht und potenzielle Konflikte mit JSF-Benennungscontainern vermeidet.

Das obige ist der detaillierte Inhalt vonWie formatiere ich JSF-Komponenten mit Doppelpunkt enthaltenden IDs in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!