Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Menggayakan Semua Tetapi Elemen Anak Pertama Menggunakan CSS?

Bagaimanakah Saya Boleh Menggayakan Semua Tetapi Elemen Anak Pertama Menggunakan CSS?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-12-10 18:42:11220semak imbas

How Can I Style All But the First Child Element Using CSS?

Elemen Penggayaan Kecuali Yang Pertama: Meneroka Pemilih CSS "not:first-child"

Dalam penggayaan CSS, "not:first" -child" pemilih membolehkan anda menyasarkan semua elemen kecuali yang pertama dalam hierarki tertentu. Walaupun nampaknya mudah, menggunakan pemilih ini dalam senario tertentu boleh mencabar.

Menggunakan CSS pada Elemen Bukan Pertama

Mari kita pertimbangkan senario di mana anda mempunyai "div teg " yang mengandungi berbilang teg "ul". Untuk menetapkan sifat CSS bagi setiap teg "ul" kecuali yang pertama, kod div ul:not(:first-child) harus berfungsi. Walau bagaimanapun, jika gagal, berikut ialah beberapa sebab:

  • Sokongan Penyemak Imbas: Pemilih "bukan:anak pertama" disokong dalam penyemak imbas moden tetapi mungkin tidak serasi dengan pelayar lama.
  • Sintaks Pemilih: Pastikan sintaks pemilih adalah betul, menggunakan titik bertindih (:) sebelum deskriptor "anak pertama".

Pendekatan Alternatif

Jika "bukan:anak pertama" bukan berdaya maju, pendekatan alternatif adalah dengan terlebih dahulu menggunakan gaya pada semua elemen dan kemudian "membatalkannya" untuk elemen pertama. Contohnya:

div ul {
    background-color: #900;
}

div ul:first-child {
    background-color: transparent;
}

Dalam contoh ini, peraturan pertama digunakan untuk semua elemen "ul", manakala peraturan kedua secara khusus mengatasi warna latar belakang untuk elemen pertama.

Mengehadkan Skop dan Nilai Lalai

Apabila mengehadkan skop menggunakan pendekatan alternatif ini, tetapkan atribut CSS yang dibatalkan kepada nilai lalai. Ini memastikan gaya asal hanya ditindih untuk elemen pertama.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Semua Tetapi Elemen Anak Pertama Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn