Bagaimana untuk memilih elemen pertama kelas dalam bekas menggunakan CSS?

Pemilih CSS untuk Memilih Elemen Pertama Kelas Diberi

Dalam pembangunan web, memilih elemen khusus pada halaman web adalah penting untuk penggayaan dan kefungsian. Satu tugas biasa ialah memilih kejadian pertama elemen dengan kelas tertentu dalam hierarki yang lebih luas.

Pertimbangkan senario di mana anda perlu memilih elemen pertama dengan kelas 'A' dalam elemen dengan id atau kelas ' B'. Manakala gabungan '>' dan pemilih 'anak pertama' boleh berfungsi dalam beberapa kes, ia gagal apabila kedudukan elemen 'A' berbeza-beza dalam hierarki elemen 'B'.

Penyelesaian CSS3: :first-of-type

CSS3 menawarkan penyelesaian melalui :first-of-type pseudo-class, yang membolehkan anda memilih elemen pertama bagi jenis tertentu berhubung dengan adik-beradiknya. Walau bagaimanapun, CSS3 tidak termasuk kelas pseudo :first-of-class.

Penyelesaian Menggunakan General Sibling Combinator (~)

Sebagai penyelesaian, anda boleh menggunakan general sibling combinator ( ~) bersempena dengan penggantian CSS untuk mencapai hasil yang diingini. Pemilih ~ sepadan dengan mana-mana elemen yang merupakan adik kepada elemen yang dipilih oleh pemilih sebelah kiri, tetapi bukan anak langsung.

Pertimbangkan peraturan ini:

.C > * > .A {
    /* Style every .A that's a grandchild of .C */
}

Peraturan ini memilih setiap elemen dengan kelas 'A' iaitu cucu kepada elemen dengan kelas 'C'. Ia menganggap bahawa '.C' ialah nenek moyang yang sama kepada semua elemen 'A' yang anda mahu gayakan.

Seterusnya, tambahkan peraturan utama:

.C > * > .A ~ .A {
    /* Style only the .A elements following the first .A child of each element that's a child of .C */
}

Peraturan ini menggunakan ~ pemilih untuk menyasarkan hanya elemen 'A' yang datang selepas elemen 'A' sebelumnya dengan induk yang sama. Ia secara berkesan mengatasi gaya yang digunakan oleh peraturan pertama.

Contoh:

Pertimbangkan struktur HTML berikut:

<div>

Peraturan CSS di atas akan menggunakan gaya seperti berikut:

• Elemen [1] tidak mempunyai kelas 'A' dan tidak terjejas.
• Elemen [2] ialah elemen 'A' pertama dalam elemen induk masing-masing dan akan menerima gaya yang ditakrifkan dalam peraturan pertama.
• Elemen [3] bukan elemen 'A' yang pertama dan akan menerima gaya yang ditakrifkan dalam peraturan mengatasi, yang mengatasi peraturan pertama.

Atas ialah kandungan terperinci Bagaimana untuk memilih elemen pertama kelas dalam bekas menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!