: anak pertama (pemilih CSS)

3

Keterangan Kelas pseudo ini sepadan dengan elemen hanya jika ia adalah elemen anak pertama elemen induknya. Sebagai contoh, Li: Anak pertama sepadan dengan item senarai pertama dalam elemen OL atau UL. Ia tidak sepadan dengan anak pertama item senarai. Sebagai contoh, mari kita ambil pemilih CSS yang disebutkan di atas:

Dan mari kita memohon kepada markup berikut:

Hanya elemen item senarai pertama yang dipadankan. Perhatikan bahawa kelas pseudo ini hanya terpakai kepada unsur-unsur-ia tidak terpakai kepada kotak tanpa nama yang dijana untuk teks. Contoh

Contoh pemilih ini sesuai Item senarai pertama dalam OL atau UL elemen:

li:first-child {
  ⋮ <span>declarations
</span>}

Soalan Lazim (Soalan Lazim) Mengenai CSS: Pemilih Kanak-kanak Pertama

<ul>
  <li>This item matches the selector li:first-child.</li>
  <li>This item does not match that selector.</li>
  <li>Neither does this one.</li>
</ul>

Apakah perbezaan antara: anak pertama dan: jenis pertama dalam CSS?

Pemilih anak pertama dalam CSS mensasarkan elemen anak pertama dalam ibu bapanya. Ia tidak menganggap jenis elemen. Sebagai contoh, jika anda mempunyai elemen div diikuti oleh elemen P di dalam elemen induk, menggunakan: anak pertama akan menargetkan elemen Div sebagai anak pertama ibu bapanya. Jadi, jika anda menggunakan: jenis pertama untuk elemen P, ia akan mensasarkan elemen P pertama, tanpa mengira sama ada anak pertama ibu bapa atau tidak. Sebagai contoh, jika anda ingin memilih anak pertama kelas tertentu, anda boleh menggunakan sintaks ".Classname: First-Child". Ini akan memilih elemen kanak-kanak pertama kelas "ClassName".

li:first-child {
  ⋮ <span>declarations
</span>}

Bagaimanakah pemilih kanak-kanak pertama bekerja dengan unsur bersarang? Sekiranya terdapat elemen bersarang, ia tidak akan menganggapnya. Sebagai contoh, jika anda mempunyai elemen div di dalam elemen Div yang lain, dan anda menggunakan pemilih anak pertama, ia hanya akan mempertimbangkan elemen Div yang pertama, bukan yang bersarang. Ia berfungsi sama seperti pemilih kanak-kanak, tetapi bukannya memilih anak pertama elemen induk, ia memilih anak yang terakhir. Elemen pseudo digunakan untuk gaya bahagian tertentu elemen, seperti huruf pertama atau garis blok teks, dan mereka tidak dianggap sebagai anak-anak elemen.

Bagaimana pemilih kanak-kanak pertama yang digunakan dalam reka bentuk responsif?

: Pemilih kanak-kanak pertama boleh digunakan dalam reka bentuk responsif untuk gaya elemen kanak-kanak pertama berbeza bergantung pada saiz skrin. Sebagai contoh, anda boleh menggunakannya untuk menukar warna, saiz fon, atau susun atur elemen kanak-kanak pertama apabila saiz skrin berubah.

Bolehkah saya menggabungkan: pemilih kanak-kanak dengan pemilih lain? Sebagai contoh, anda boleh menggunakannya dengan pemilih kelas untuk menargetkan anak pertama kelas tertentu, atau dengan pemilih elemen untuk menyasarkan anak pertama jenis elemen tertentu. Walau bagaimanapun, ia tidak disokong oleh versi Internet Explorer 8 dan terdahulu. Ia hanya boleh menargetkan nod elemen. Jika anda ingin gaya nod teks, anda perlu membungkusnya dalam elemen dan kemudian menargetkan elemen itu. Ia hanya menganggap nod elemen, bukan nod teks. Jadi, jika anda mempunyai ruang kosong sebelum elemen anak pertama, ia tidak akan menjejaskan: pemilih kanak-kanak pertama.

Atas ialah kandungan terperinci : anak pertama (pemilih CSS). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!