Comment styliser les composants JSF avec des identifiants contenant deux points en CSS ?

Comment cibler les identifiants générés par JSF avec des deux-points dans les sélecteurs CSS

Dans les applications JSF, les composants peuvent être rendus avec des ID client contenant des deux-points, comme "phoneForm: phoneTable". Ces deux-points peuvent entrer en conflit avec la syntaxe des sélecteurs CSS, qui utilisent des deux-points pour indiquer des pseudo-classes.

1. Échapper aux deux points :

Échapper aux deux points en utilisant une barre oblique inverse (). Cela fonctionne dans la plupart des navigateurs.

#phoneForm\:phoneTable {
    background: pink;
}

2. Utilisez une barre oblique inverse avec un espace d'échappement :

Dans IE6/7, les deux points d'échappement nécessitent un espace de fin.

#phoneFormA phoneTable {
    background: pink;
}

3. Envelopper dans un élément natif :

Enveloppez le composant JSF dans un élément HTML normal et appliquez des styles au wrapper.

<h:form>

#phoneField table {
    background: pink;
}

4. Utilisez plutôt une classe :

Attribuez au composant une classe CSS au lieu d'un ID. Cela élimine le problème du côlon.

<h:dataTable>

.pink {
    background: pink;
}

5. Modifier le séparateur JSF (JSF 2.x) :

Modifiez le séparateur JSF UINamingContainer dans web.xml en un trait d'union (-) au lieu de deux points.

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

#phoneForm-phoneTable {
    background: pink;
}

6. Désactiver le pré-ajout de l'ID de formulaire (JSF 1.2) :

Désactiver le pré-ajout de l'ID de formulaire aux ID de composant. Cependant, cela peut entraîner des problèmes avec le traitement AJAX et n'est pas recommandé.

    <h:dataTable>

#phoneTable {
    background: pink;
}

Recommandation :

Pour votre cas spécifique, utiliser une classe CSS comme "phoneTable" est la solution la plus adaptée, car elle permet une certaine flexibilité et évite les conflits potentiels avec les conteneurs de noms JSF.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!