Bagaimana untuk Mengendalikan Kolon Dijana JSF dalam Pemilih CSS?

ID Elemen HTML Dijana JSF: Escape Colons dalam CSS Selectors

Apabila bekerja dengan JSF (JavaServer Faces), anda mungkin menghadapi ID elemen HTML dijana dengan titik bertindih (:). Ini boleh menyebabkan isu apabila menggunakan pemilih CSS, di mana titik bertindih menunjukkan permulaan pemilih pseudo.

Asal usul ID Dijajah:

JSF menjana ID klien untuk elemen HTML dengan lalai dalam bentuk "FormID:ElementID". Ini ialah cara mudah untuk mengendalikan ID yang bercanggah dalam aplikasi JSF.

Isu dengan Pemilih CSS:

Malangnya, titik bertindih dalam pemilih CSS mewakili permulaan pemilih pseudo , seperti :hover atau :first-child. Percubaan untuk menggunakan pemilih seperti #FormID:ElementID akan mengakibatkan ralat.

Penyelesaian:

1. Melarikan diri dari Colon dengan "" atau "3A":

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

#FormIDA ElementID {
  /* CSS styles */
}

2. Gunakan Pembungkus HTML dengan ID Biasa:

<div>

#phoneWrapper table {
  /* CSS styles */
}

3. Tukar UINamingContainer Separator:

Dalam JSF 2.x, anda boleh mengubah suai aksara pemisah lalai dalam bahagian konteks-param web.xml:

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

Ini akan berubah ID yang dijana kepada "FormID-ElementID", menjadikannya lebih serasi dengan CSS pemilih.

4. Lumpuhkan Prapending ID Borang:

Dalam JSF 1.2 atau lebih baru, anda boleh melumpuhkan pendahuluan ID borang dengan menambahkan prependId="false" pada teg h:form:

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

Walau bagaimanapun, pendekatan ini tidak disyorkan kerana ia boleh memberi kesan kepada fungsi AJAX.

5. Gunakan Kelas CSS:

<h:dataTable>

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

Pengesyoran:

Untuk kebanyakan kes, disyorkan untuk melarikan diri dari kolon menggunakan aksara "". Ini ialah penyelesaian yang mudah dan serasi merentas penyemak imbas.

Atas ialah kandungan terperinci Bagaimana untuk Mengendalikan Kolon Dijana JSF dalam Pemilih CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!