Mengapa `DIV.section DIV:first-child` Tidak Menggayakan Anak Langsung Pertama?

Kekhususan Pemilih Kanak-kanak Langsung

Apabila menggunakan CSS pada elemen HTML, adalah penting untuk memahami kekhususan pemilih. Dalam senario anda, pemilih DIV.section DIV:first-child nampaknya menggayakan kedua-dua div "sub kandungan 1" dan "header".

Walau bagaimanapun, pemilih bertujuan untuk memadankan hanya anak langsung pertama daripada div dengan kelas "bahagian". Mari kita pecahkan mengapa pemilih asal tidak berfungsi seperti yang diharapkan.

Memahami Keturunan Langsung vs. Anak Langsung

Kelas pseudo anak pertama memilih anak pertama daripada sesuatu unsur. Walau bagaimanapun, dalam kes anda, anda menggunakannya pada DIV.section DIV, yang bermaksud "pilih semua div yang merupakan keturunan div dengan 'bahagian' kelas". Ini termasuk kedua-dua kanak-kanak langsung dan kanak-kanak bersarang.

Menggunakan Pemilih Keturunan Langsung

Untuk menyasarkan hanya anak langsung pertama div dengan "bahagian" kelas, anda hendaklah menggunakan pemilih keturunan langsung (>). Operator ini memadankan elemen yang merupakan anak terdekat kepada ibu bapa tertentu. Pemilih yang diubah suai ialah:

div.section > div:first-child

Pemilih ini akan menggayakan hanya div "pengepala" dengan betul, kerana ia adalah anak langsung pertama div dengan "bahagian" kelas.

Isu Penyemak Imbas Warisan

Ambil perhatian bahawa pemilih keturunan langsung tidak disokong dalam yang lebih lama penyemak imbas, seperti Internet Explorer 6. Jika anda perlu menyokong penyemak imbas sedemikian, anda mungkin perlu menggunakan kaedah alternatif, seperti menambah kelas pada div kanak-kanak.

Atas ialah kandungan terperinci Mengapa `DIV.section DIV:first-child` Tidak Menggayakan Anak Langsung Pertama?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!