Bagaimana untuk Menggayakan Komponen JSF dengan ID yang Mengandungi Kolon dalam CSS?

Cara Menyasarkan Pengecam Dijana JSF dengan Titik Bertitik dalam Pemilih CSS

Dalam aplikasi JSF, komponen mungkin dipaparkan dengan ID klien yang mengandungi titik bertindih, seperti "phoneForm:phoneTable." Titik bertindih ini boleh bercanggah dengan sintaks pemilih CSS, yang menggunakan bertindih untuk menunjukkan kelas pseudo.

1. Melarikan diri dari kolon:

Escape kolon menggunakan garis serong ke belakang (). Ini berfungsi dalam kebanyakan penyemak imbas.

#phoneForm\:phoneTable {
    background: pink;
}

2. Gunakan garisan belakang yang terlepas ruang:

Dalam IE6/7, kolon yang terlepas memerlukan ruang mengekor.

#phoneFormA phoneTable {
    background: pink;
}

3. Balut dalam Elemen Asli:

Balut komponen JSF dalam elemen HTML biasa dan gunakan gaya pada pembalut.

<h:form>

#phoneField table {
    background: pink;
}

4. Gunakan Kelas Sebaliknya:

Tetapkan komponen kelas CSS dan bukannya ID. Ini menghapuskan isu kolon.

<h:dataTable>

.pink {
    background: pink;
}

5. Tukar Pemisah JSF (JSF 2.x ):

Ubah suai pemisah JSF UINamingContainer dalam web.xml kepada tanda sempang (-) dan bukannya titik bertindih.

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

#phoneForm-phoneTable {
    background: pink;
}

6. Lumpuhkan pendahuluan ID borang (JSF 1.2 ):

Lumpuhkan pendahuluan ID borang kepada ID komponen. Walau bagaimanapun, ini boleh menyebabkan masalah dengan pemprosesan AJAX dan tidak disyorkan.

    <h:dataTable>

#phoneTable {
    background: pink;
}

Cadangan:

Untuk kes khusus anda, menggunakan kelas CSS seperti "phoneTable" ialah penyelesaian yang paling sesuai, kerana ia membenarkan fleksibiliti dan mengelakkan kemungkinan konflik dengan bekas penamaan JSF.

Atas ialah kandungan terperinci Bagaimana untuk Menggayakan Komponen JSF dengan ID yang Mengandungi Kolon dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!