Bagaimana untuk Menggayakan Elemen HTML Dijana JSF dengan Tanda Titik dalam ID Mereka Menggunakan CSS?

Menggunakan ID Elemen HTML Dijana JSF dengan Titik Bertitik (":") dalam Pemilih CSS

Apabila bekerja dengan JSF, anda mungkin menghadapi situasi di mana JSF yang dijana ID elemen HTML mempunyai titik bertindih (":") di dalamnya, menyebabkan masalah apabila menggunakan pemilih CSS. Titik bertindih ialah aksara khas dalam pengecam CSS, kerana ia mewakili permulaan pemilih kelas pseudo seperti :hover, :first-child, dll.

Escaping the Colon

Untuk menggunakan JSF -generated ID dengan titik bertindih dalam CSS, anda boleh melarikan diri menggunakan salah satu daripada yang berikut kaedah:

• Ganti kolon dengan "3A" (dengan ruang belakang):

  #phoneFormA phoneTable {
    background: pink;
  }

  Salin selepas log masuk

• Ganti kolon dengan ":" (untuk semua penyemak imbas kecuali IE6/7):

  #phoneForm\:phoneTable {
    background: pink;
  }

  Salin selepas log masuk

Pendekatan Alternatif

Selain melarikan diri dari kolon, terdapat pendekatan lain untuk menangani isu ini:

1. Balut dalam HTML Biasa Elemen:

   Balut elemen JSF dalam elemen HTML biasa dan gayakan pembalut sebaliknya.

2. Gunakan Kelas CSS:

   Tetapkan kelas CSS kepada elemen JSF dan bukannya menggunakan ID.

3. Ubah suai UINamingContainer Separator (JSF 2.x sahaja):

   Tukar aksara pemisah UINamingContainer dalam web.xml kepada aksara lain daripada ":".

4. Lumpuhkan pendahuluan ID Borang (JSF 1.2 sahaja):

   Lumpuhkan pendahuluan ID borang untuk borang tertentu yang menjana elemen bermasalah.

Disyorkan Penyelesaian:

Dalam kebanyakan kes, membalut elemen JSF dalam kelas CSS ialah penyelesaian yang paling sesuai. Ia memberikan fleksibiliti dan kebolehgunaan semula yang lebih baik, dan ia mengelakkan potensi isu dengan pendekatan tertentu seperti melumpuhkan pendahuluan ID borang.

Atas ialah kandungan terperinci Bagaimana untuk Menggayakan Elemen HTML Dijana JSF dengan Tanda Titik dalam ID Mereka Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!