Wie gehe ich mit JSF-generierten Doppelpunkten in CSS-Selektoren um?

JSF-generierte HTML-Element-IDs: Escape-Doppelpunkte in CSS-Selektoren

Bei der Arbeit mit JSF (JavaServer Faces) können Sie auf HTML-Element-IDs stoßen wird mit Doppelpunkten (:) generiert. Dies kann bei der Verwendung von CSS-Selektoren zu Problemen führen, bei denen Doppelpunkte den Beginn von Pseudo-Selektoren anzeigen.

Ursprung kolonisierter IDs:

JSF generiert Client-IDs für HTML-Elemente durch Standardmäßig in der Form „FormID:ElementID“. Dies ist eine bequeme Möglichkeit, mit widersprüchlichen IDs in einer JSF-Anwendung umzugehen.

Problem mit CSS-Selektoren:

Leider stellen Doppelpunkte in CSS-Selektoren den Anfang von Pseudo-Selektoren dar , wie zum Beispiel :hover oder :first-child. Der Versuch, Selektoren wie #FormID:ElementID zu verwenden, führt zu einem Fehler.

Lösungen:

1. Entkomme dem Doppelpunkt mit „" oder „3A“:

#FormID\:ElementID {
  /* CSS styles */
}

#FormIDA ElementID {
  /* CSS styles */
}

2. Verwenden Sie einen HTML-Wrapper mit einer einfachen ID:

<div>

#phoneWrapper table {
  /* CSS styles */
}

3. Ändern Sie das UINamingContainer-Trennzeichen:

In JSF 2.x können Sie das Standardtrennzeichen im Abschnitt context-param von web.xml ändern:

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

Dies wird sich ändern Die generierten IDs werden in „FormID-ElementID“ umgewandelt, wodurch sie besser mit CSS-Selektoren kompatibel sind.

4. Voranstellen der Formular-ID deaktivieren:

In JSF 1.2 oder höher können Sie das Voranstellen der Formular-ID deaktivieren, indem Sie prependId="false" zum h:form-Tag hinzufügen:

<h:form prependId="false">
  <h:dataTable>

Dieser Ansatz wird jedoch nicht empfohlen, da er die AJAX-Funktionalität beeinträchtigen kann.

5. Verwenden Sie CSS-Klassen:

<h:dataTable>

.phone-table {
  /* CSS styles */
}

Empfehlung:

In den meisten Fällen wird empfohlen, den Doppelpunkt mit dem Zeichen „“ zu maskieren. Dies ist eine einfache und browserübergreifende kompatible Lösung.

Das obige ist der detaillierte Inhalt vonWie gehe ich mit JSF-generierten Doppelpunkten in CSS-Selektoren um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!