Bagaimana untuk Memilih Hanya Anak Langsung DIV Menggunakan CSS?

Pemilih CSS untuk Anak Langsung

Anda mahu menggunakan CSS kepada anak langsung pertama DIV dengan "bahagian" kelas. Walau bagaimanapun, anda menghadapi gelagat yang tidak dijangka di mana gaya itu mempengaruhi lebih daripada sekadar elemen yang diingini.

Pemilih yang anda gunakan ialah "DIV.section DIV:first-child". Pemilih ini memadankan mana-mana DIV yang berada di dalam DIV dengan "bahagian" kelas dan merupakan anak pertama kepada induknya. Walau bagaimanapun, dalam HTML anda, DIV "sub kandungan 1" berada di dalam DIV lain yang merupakan anak pertama DIV "bahagian", oleh itu penggunaan gaya yang tidak dijangka.

Untuk menyelesaikan masalah ini, anda boleh menggunakan pemilih yang lebih tepat:

Untuk Kedua-dua Anak Utama DIV:

div.section > div

Pemilih ini menggunakan ">" simbol, yang memilih elemen yang merupakan anak langsung kepada ibu bapa yang ditentukan. Dalam kes ini, ia hanya akan sepadan dengan dua DIV yang merupakan anak langsung DIV "bahagian".

Untuk Pengepala Sahaja:

div.section > div:first-child

Pemilih ini menggabungkan yang sebelumnya dengan kelas pseudo ":anak pertama", memastikan bahawa hanya anak langsung pertama DIV "bahagian" dipilih. Ini akan menyasarkan DIV "pengepala" secara eksklusif.

Perhatikan bahawa ">" simbol disokong oleh semua pelayar utama kecuali IE6. Jika sokongan IE6 adalah penting, anda mungkin perlu menggunakan pendekatan alternatif seperti menambahkan kelas pada DIV kanak-kanak dan menggayakannya secara langsung.

Atas ialah kandungan terperinci Bagaimana untuk Memilih Hanya Anak Langsung DIV Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!