Mengapakah `h3:nth-child(1):contains(\'a\')` Tidak Berfungsi Seperti Yang Dijangkakan?

Pemilih h3:nth-child(1):mengandungi('a') Ketidakberkesanan

Walaupun sintaksnya yang jelas, pemilih h3: nth-child(1):contains('a') gagal melaksanakan tujuannya fungsi.

Di Bawah Hud

Setelah penyiasatan lanjut, didapati bahawa h3:nth-child(1) dengan betul menyasarkan elemen h3 pertama dalam bekas induknya. Walau bagaimanapun, h3:nth-child(1):contains('a') tidak menghasilkan hasil kerana pemilih :contains(), yang pada asalnya bertujuan sebagai ciri CSS3, telah diabaikan daripada spesifikasi CSS.

: contains() direka untuk memadankan elemen yang mengandungi corak teks tertentu. Malangnya, cara ia berfungsi menimbulkan cabaran kepada prestasi penyemak imbas dan membawa kepada isu pemilihan berlebihan. Sebagai contoh, pemadanan elemen menggunakan :contains() juga akan sepadan dengan semua nenek moyangnya, yang berpotensi mengakibatkan tingkah laku yang tidak dijangka apabila digabungkan dengan pemilih universal atau sifat gaya tertentu.

Pendekatan Alternatif

Disebabkan ketiadaan alternatif pemilih CSS yang sesuai, untuk mencapai hasil yang diinginkan memerlukan kaedah alternatif. Mengubah suai struktur HTML atau menggunakan pelaksanaan jQuery bagi :contains() boleh diterokai:

• Pilih elemen h3 sebagai anak pertama dalam induknya dan dengan teks yang mengandungi 'a'.

jQuery atau Selenium RC Pertimbangan

Untuk Pengguna jQuery dan Selenium RC, :contains() dilaksanakan dalam enjin pemilih Sizzle, menyediakan fungsi yang serupa dengan spesifikasi CSS3. Walau bagaimanapun, adalah disyorkan untuk menggunakan pemilih ini dengan bijak untuk mengelakkan pilihan yang tidak dijangka.

Pemurnian

Akhir sekali, h3:nth-child(1) boleh digantikan dengan h3 :anak pertama untuk keserasian penyemak imbas yang dipertingkatkan sebagai pemilih CSS2.

Atas ialah kandungan terperinci Mengapakah `h3:nth-child(1):contains(\'a\')` Tidak Berfungsi Seperti Yang Dijangkakan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!