Mengapakah `h3:nth-child(1):contains(\'a\')` tidak Pilih Yang Pertama Mengandungi \'a\'?

Mengapa h3:nth-child(1):contains('a') Gagal?

Dalam percubaan untuk memilih yang pertama elemen h3 yang mengandungi teks "a", pemilih h3:nth-child(1):contains('a') sedang digunakan. Walau bagaimanapun, pemilih ini tidak memberikan hasil yang diingini.

Penjelasan:

Pemilih CSS3 :contains() tidak pernah dilaksanakan sebagai standard dan oleh itu tidak disokong dalam pelayar utama. Pemilih ini bertujuan untuk memadankan elemen yang mengandungi teks tertentu, tetapi pelaksanaannya akan membawa kepada isu prestasi kerana pemadanan semua nenek moyang elemen itu juga.

Penyelesaian Alternatif:

Memandangkan :contains() tidak tersedia, pendekatan alternatif adalah diperlukan:

• Ubah suai HTML: Susun semula struktur HTML untuk meletakkan elemen h3 yang dikehendaki di lokasi yang berbeza.
• Gunakan jQuery: jQuery menyediakan pemilih :contains() sendiri, yang boleh digunakan sebagai berikut:

$("h3:first").filter(function() {
  return $(this).text().indexOf("a") >= 0;
});

Pertimbangan:

• Untuk jQuery dan Selenium RC, :contains() disokong tetapi boleh membawa kepada pilihan yang tidak dijangka kerana kepada nenek moyang yang sepadan.
• Pemilih CSS2 h3:anak pertama boleh digunakan sebaliknya daripada h3:nth-child(1) untuk sokongan penyemak imbas yang lebih baik.

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