CSS Pseudo-Classes: Elemen Gaya Berdasarkan Indeks mereka
pemilih CSS: Pemilihan kelas pseudo berdasarkan kedudukan elemen dalam subtree dokumen
mata teras
- CSS menyediakan pemilih yang dipanggil kelas pseudo sub-indeks untuk memadankan elemen berdasarkan kedudukan mereka dalam subtree dokumen. Ini termasuk
- ,
:first-child,:last-child,:only-child,:nth-child()dan:nth-last-child(). -
:nth-child()dan:nth-last-child()kelas pseudo berfungsi dan boleh menerima parameter dalam bentuk kata kunciodd,evenkata kunci, integer, atauAn B, di mana A adalah selang langkah dan b adalah yang Peralihan bias, n adalah integer positif. -
:only-childkelas pseudo sepadan dengan elemen jika elemen adalah satu-satunya anak dari elemen lain. <code>:empty kelas pseudo boleh memilih elemen tanpa elemen kanak-kanak, bahkan ruang. - CSS menyediakan kelas pseudo sub-indeks yang ditaip yang sepadan dengan elemen berdasarkan nilai indeks, tetapi terhad kepada unsur-unsur jenis tertentu. Ini termasuk
:first-of-type,:last-of-type,:only-of-type,:nth-of-type(),:nth-last-of-type()dan .
CSS juga menyediakan pemilih untuk unsur yang sepadan berdasarkan kedudukan mereka dalam subtree dokumen. Ini dipanggil kelas pseudo sub-indeks kerana ia bergantung kepada kedudukan atau urutan elemen, bukan jenis, atribut, atau IDnya. Terdapat lima dalam jumlah:
-
:first-child -
:last-child -
:only-child -
:nth-child() -
:nth-last-child()dan
seperti yang anda fikirkan dari nama, :first-child dan :last-child kelas pseudo boleh digunakan untuk memilih unsur-unsur yang merupakan elemen anak pertama atau terakhir nod (elemen). Seperti kelas pseudo lain,
dan mempunyai kesan sampingan paling sedikit apabila ditakrifkan oleh pemilih mudah. :first-child
:last-child mari kita lihat HTML dan CSS di bawah: :first-child
:last-child
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2 id="List-of-fruits">List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body>kerana
tidak terhad, elemen dan elemen 
pertama berwarna merah jambu. Lagipun,
, dan :first-child adalah elemen anak pertama dari elemen h2. Tetapi kenapa baki li elemen hijau? Itu kerana h2 tidak terhad sama ada, body adalah elemen kanak -kanak terakhir li. Kami sebenarnya menaip ul dan li. :last-child
Jika kita layak :first-child dan :last-child dengan menambah pemilih yang mudah, maka ini lebih masuk akal. Mari hadkan pemilihan untuk menyenaraikan item. Tukar :first-child ke li:first-child, dan :last-child ke li:last-child. Angka berikut menunjukkan hasilnya.
dan :nth-child() :nth-last-child()
Adalah baik untuk dapat memilih elemen anak pertama dan terakhir dokumen. Tetapi bagaimana jika kita mahu memilih elemen ganjil atau bahkan? Mungkin kita mahu memilih elemen keenam dalam subtree dokumen, atau memohon gaya untuk setiap tiga elemen. Di sinilah kelas pseudo dan :nth-child() dimainkan. :nth-last-child()
, :not() dan :nth-child() juga berfungsi kelas pseudo. Mereka menerima parameter yang sepatutnya: :nth-last-child()
- Kata kunci
odd - Kata kunci
even integer, seperti 2 atau 8, atau - Parameter dalam bentuk
- , di mana A adalah selang langkah, B adalah offset, dan n ialah pembolehubah yang mewakili integer positif.
An B
Apakah perbezaan antara
dan :nth-child()? Titik permulaan: :nth-last-child() mengira ke hadapan, :nth-child() hitung ke belakang. Indeks CSS menggunakan nombor kiraan, bermula dengan 1 bukan 0. :nth-last-child()
Kedua -dua
dan :nth-child() boleh digunakan dalam mod berselang. Mewujudkan warna baris corak zebra adalah kes penggunaan yang sempurna. CSS berikut menyediakan latar belakang biru-kelabu muda untuk baris meja yang bernombor, dan hasilnya dapat dilihat dalam angka berikut: :nth-last-child()
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2 id="List-of-fruits">List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body>
Switching
akan membalikkan band ini kerana kiraan bermula di bahagian bawah, seperti yang ditunjukkan di bawah. :nth-child
:nth-last-child
Bagaimana untuk mencuba beberapa contoh kompleks parameter yang lebih kompleks? Kami akan bermula dengan dokumen yang ditunjukkan di bawah, yang mengandungi 20 item. 
Menggunakan :nth-child() dan :nth-last-child(), kita boleh memilih elemen kanak -kanak individu di lokasi tertentu. Kita boleh memilih semua elemen kanak -kanak selepas kedudukan tertentu, atau kita boleh memilih elemen dengan gandaan, dengan mengimbangi. Mari ubah warna latar belakang projek keenam:
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2 id="List-of-fruits">List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body>
Tetapi bagaimana jika kita mahu memilih setiap tiga elemen? Di sinilah
An B
tr:nth-child(even) {
background: rgba(96, 125, 139, 0.1);
}
Terdapat tempat di mana perkara menjadi lebih menarik. Kita boleh menggunakan 
dan
:nth-child()
:nth-last-child() Tidak ada nilai saiz langkah di sini. Oleh itu, n 8 sepadan dengan setiap elemen N bermula dari elemen kelapan, seperti yang ditunjukkan di bawah.
.item:nth-child(6) {
background: #e91e63;
}
Nilai offset dan julat negatif juga sah. Menggunakan
kita juga boleh memilih setiap tiga elemen menggunakan nilai offset dan saiz langkah, bermula dari yang kelima:
:nth-child(-n 8)
.item:nth-child(3n) {
background: #e91e63;
}
Jika elemen adalah kanak-kanak yang unik 
s unik dari elemen lain, maka
:only-child
menggunakan Apple akan dipilih kerana ia adalah satu -satunya elemen kanak -kanak senarai pertama kami. Walau bagaimanapun, sebarang item dalam senarai kedua tidak sepadan kerana terdapat tiga elemen saudara. Anda dapat melihat apa yang kelihatan seperti dalam gambar di bawah.
:only-child <code>:empty
anda juga boleh menggunakan kelas pseudo
untuk memilih <code>:empty unsur tanpa elemen kanak-kanak. Apabila kita katakan , kita maksudkan <code>:empty kosong . Untuk membuat elemen sepadan dengan kelas pseudo , ia tidak boleh mengandungi apa-apa lagi-ruang. Dalam erti kata lain, <code>:empty <p></p> akan dipadankan, tetapi <code><p> </p> <code>:empty tidak akan sepadan. Kadang -kadang editor WYSIWYG memasukkan elemen P kosong ke dalam kandungan anda. Anda boleh menggunakan :not() dalam kombinasi dengan p:not(:empty) kelas pseudo untuk mengelakkan penggunaan gaya ke unsur-unsur ini;
Pilih jenis elemen tertentu dengan indeks mereka
kelas pseudo yang dibincangkan dalam bahagian sebelumnya sepadan dengan elemen jika ia menduduki kedudukan tertentu dalam subtree dokumen. Sebagai contoh, p:nth-last-child(2) memilih setiap elemen p yang merupakan elemen terakhir elemen induknya.
Dalam bahagian ini, kami akan membincangkan kelas pseudo sub-indeks yang ditaip. Kelas pseudo ini juga sepadan dengan unsur-unsur berdasarkan nilai indeks mereka; Sebagai contoh, pilih elemen kelima P, atau elemen H2 dengan indeks walaupun.
Terdapat lima kelas pseudo seperti nama yang sama dengan rakan sejawatnya yang tidak ditaip:
-
:first-of-type -
:last-of-type -
:only-of-type -
:nth-of-type() Perbezaan antara kelas pseudo dan kelas pseudo sub-indeks ini halus. Di mana - sepadan dengan item kelima hanya jika ia adalah elemen p,
:nth-last-of-type()sepadan dengan semua elemen p, dan kemudian mendapati elemen kelima p di antara unsur -unsur ini.
p:nth-child(5) p:nth-of-type(5)
,
dan 
, kita boleh memilih elemen pertama yang sepadan dengan pemilih. Bagaimana kita menyediakan latar belakang hijau kapur untuk elemen p pertama: :first-of-type
:last-of-type
:only-type Ini akan sepadan dengan setiap elemen p yang merupakan elemen pertama P unsur induknya, seperti yang ditunjukkan di bawah.
:first-of-type
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2 id="List-of-fruits">List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body>s unik
elemen induknya, maka akan sepadan dengan elemen itu seperti yang ditunjukkan di bawah. 
mari kita lihat contoh lain menggunakan :first-of-type, tetapi kali ini menggunakan pseudo-element. Adakah anda masih ingat ::first-letter pseudo-elemen yang disebutkan sebelumnya dalam bab ini? Nah, seperti yang anda lihat, ia mewujudkan surat modal awal untuk setiap elemen yang memohon. Mari kita melangkah lebih jauh dan hadkan surat modal awal ini ke perenggan pertama:
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
<style>
body {
font: 16px/1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
<h2 id="List-of-fruits">List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body>Seperti yang ditunjukkan dalam imej berikut, kini perenggan kami akan mempunyai surat modal awal, walaupun ia didahului oleh tajuk.
dan :nth-of-type :nth-last-of-type
:nth-last-of-type
dan :nth-of-type() juga kelas pseudo berfungsi. Mereka menerima parameter yang sama seperti :nth-last-of-type() dan :nth-child(). Tetapi seperti :nth-last-child() dan :first-of-type, indeks menyelesaikan unsur -unsur yang sama. Sebagai contoh, untuk memilih elemen p pertama dan setiap elemen P berikutnya, kita boleh menggunakan kata kunci :last-of-type dengan odd: :nth-of-type()
tr:nth-child(even) {
background: rgba(96, 125, 139, 0.1);
}
Begitu juga, gunakan
:nth-last-of-type(even)
Jika ini masih kelihatan kabur, gunakan alat ujian NTH Paul Maloney, atau periksa contoh-contoh di Nth Master. Kedua-dua projek adalah cara terbaik untuk mengetahui lebih lanjut mengenai kelas pseudo ini. 
[5]
Sintaks
ini diterangkan dalam modul sintaks CSS tahap 3.
Soalan Lazim Mengenai CSS Pseudo-Classes dan Gaya Elemen Berasaskan Indeks
An B Apakah kelas pseudo CSS?
CSS Pseudo-Class adalah kata kunci yang ditambah kepada pemilih dan digunakan untuk menentukan keadaan khas elemen yang dipilih. Sebagai contoh,
boleh digunakan untuk menukar warna butang apabila penunjuk pengguna melayang di atasnya. Kelas pseudo, bersama-sama dengan kelas dan ID, adalah cara untuk menggunakan gaya kepada unsur-unsur tanpa menukar tag HTML.
:nth-child Bagaimana kelas pseudo berfungsi?
:nth-child Bagaimana kelas pseudo berfungsi? :nth-child Pseudo-Class sepadan dengan elemen berdasarkan kedudukan unsur-unsur dalam sekumpulan unsur serentak. Ia menggunakan sintaks seperti fungsi :nth-child(an b) di mana "a" dan "b" adalah nilai integer. "N" adalah kaunter bermula pada 0 dan kenaikan sebanyak 1 untuk setiap elemen. "B" bermaksud elemen yang akan dipilih, bermula dengan elemen pertama (b = 1).
:nth-child dan :nth-of-type?
:nth-child sepadan dengan elemen berdasarkan kedudukan elemen dalam semua unsur saudara kandungnya, sementara :nth-of-type hanya menganggap kedudukan dalam unsur -unsur saudara dari jenis yang sama. Sebagai contoh, jika elemen <code>p:nth-child(2) , elemen kanak -kanak kedua dipilih, dan <p></p> akan memilih elemen kedua <code>p:nth-of-type(2) , dan tanpa mengira kedudukan dalam unsur -unsur saudara yang lain. <p></p>
anda boleh menggunakan kelas pseudo
dengan pemilih kelas. Sebagai contoh, :nth-child akan memilih elemen pertama dengan kelas "MyClass". Ingat bahawa ini hanya berfungsi jika elemen adalah anak pertama elemen induknya. .myClass:nth-child(1)
? :nth-child
tidak, nilai negatif tidak dibenarkan. Nilai minimum yang boleh anda gunakan ialah 0, yang tidak memilih sebarang elemen. :nth-child
Anda boleh menggunakan kata kunci "walaupun" dan "ganjil" dengan
untuk memilih setiap elemen atau ganjil. Sebagai contoh, :nth-child akan memilih setiap elemen kedua bermula dari elemen pertama. :nth-child(even)
dengan kelas pseudo lain? :nth-child
Ya, anda boleh menggunakan dalam kombinasi dengan kelas pseudo yang lain. Sebagai contoh, :nth-child akan memohon gaya apabila penunjuk pengguna melayang ke atas elemen kanak -kanak kedua. :nth-child(2):hover
Adakah terdapat perbezaan prestasi antara
dan :nth-child? :nth-of-type
Dalam kebanyakan kes, perbezaan prestasi boleh diabaikan. Walau bagaimanapun, apabila berurusan dengan sejumlah besar elemen, mungkin sedikit lebih cepat kerana ia hanya menganggap unsur -unsur saudara dari jenis yang sama. :nth-of-type
dengan elemen pseudo? :nth-child
Tidak, elemen pseudo tidak boleh digunakan dengan kerana mereka tidak dianggap sebahagian daripada pokok dokumen. :nth-child
Adakah terdapat masalah keserasian pelayar? :nth-child
Semua pelayar moden disokong dengan baik . Walau bagaimanapun, ia tidak disokong oleh Internet Explorer 8 atau lebih awal. Bagi penyemak imbas ini, anda mungkin perlu menggunakan JavaScript atau JQuery untuk mencapai kesan yang sama. :nth-child
Atas ialah kandungan terperinci CSS Pseudo-Classes: Elemen Gaya Berdasarkan Indeks mereka. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1676
14
1429
52
1333
25
1278
29
1257
24
Perbandingan pembekal bentuk statik
Apr 16, 2025 am 11:20 AM
Mari kita cuba menyusun istilah di sini: "Penyedia Borang Statik." Anda membawa html anda
Bukti konsep untuk menjadikan sass lebih cepat
Apr 16, 2025 am 10:38 AM
Pada permulaan projek baru, kompilasi SASS berlaku dalam sekejap mata. Ini terasa hebat, terutamanya apabila ia dipasangkan dengan BrowserSync, yang dimuat semula
Berita Platform Mingguan: Atribut Memuat HTML, Spesifikasi ARIA Utama, dan Bergerak Dari IFRAME ke Shadow Dom
Apr 17, 2025 am 10:55 AM
Pada minggu ini, berita platform, Chrome memperkenalkan atribut baru untuk memuatkan, spesifikasi aksesibiliti untuk pemaju web, dan gerakan BBC
Beberapa tangan dengan elemen dialog HTML
Apr 16, 2025 am 11:33 AM
Ini saya melihat elemen HTML untuk kali pertama. Saya telah menyedarinya untuk seketika, tetapi Haven ' t mengambilnya untuk putaran lagi. Ia mempunyai cukup keren dan
Kertas kerja
Apr 16, 2025 am 11:24 AM
Beli atau Membina adalah perdebatan klasik dalam teknologi. Membina barang sendiri mungkin berasa lebih murah kerana tidak ada item baris pada bil kad kredit anda, tetapi
Berita Platform Mingguan: Bookmarket Jarak Teks, Menunggu Tahap Teratas, Penunjuk Memuatkan AMP Baru
Apr 17, 2025 am 11:26 AM
Pada minggu ini, roundup, sebuah bookmarklet yang berguna untuk memeriksa tipografi, menggunakan menunggu untuk mengamuk dengan cara modul JavaScript mengimport satu sama lain, ditambah Facebook ' s
Di manakah 'Langgan Podcast' pautan ke?
Apr 16, 2025 pm 12:04 PM
Untuk sementara waktu, iTunes adalah anjing besar dalam podcasting, jadi jika anda mengaitkan "Langgan Podcast" untuk suka:
Pilihan untuk menganjurkan analisis berasaskan bukan JavaScript anda sendiri
Apr 15, 2025 am 11:09 AM
Terdapat banyak platform analisis untuk membantu anda mengesan data pelawat dan penggunaan di laman web anda. Mungkin paling penting Google Analytics, yang digunakan secara meluas
