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
1653
14
1413
52
1304
25
1251
29
1224
24
Kad yang disusun dengan kedudukan melekit dan sasaran sass
Apr 03, 2025 am 10:30 AM
Pada hari yang lain, saya melihat sedikit ini sangat indah dari laman web Corey Ginnivan di mana koleksi kad timbunan di atas satu sama lain semasa anda menatal.
Fon Font Google Fon
Apr 09, 2025 am 10:42 AM
Saya melihat Font Google melancarkan reka bentuk baru (tweet). Berbanding dengan reka bentuk besar yang terakhir, ini terasa lebih berulang. Saya hampir tidak dapat memberitahu perbezaannya
Cara membuat pemasa undur animasi dengan HTML, CSS dan JavaScript
Apr 11, 2025 am 11:29 AM
Pernahkah anda memerlukan pemasa undur dalam projek? Untuk sesuatu seperti itu, mungkin semula jadi untuk mencapai plugin, tetapi sebenarnya lebih banyak lagi
Panduan Atribut Data HTML
Apr 11, 2025 am 11:50 AM
Semua yang anda ingin tahu mengenai atribut data dalam HTML, CSS, dan JavaScript.
Kenapa kawasan -kawasan yang dikurangkan ungu di susun atur flex tersilap dianggap sebagai 'ruang limpahan'?
Apr 05, 2025 pm 05:51 PM
Soalan mengenai kawasan slash ungu dalam susun atur flex Apabila menggunakan susun atur flex, anda mungkin menghadapi beberapa fenomena yang mengelirukan, seperti dalam alat pemaju (D ...
Bagaimana untuk memilih elemen kanak -kanak dengan item nama kelas pertama melalui CSS?
Apr 05, 2025 pm 11:24 PM
Apabila bilangan elemen tidak ditetapkan, bagaimana untuk memilih elemen anak pertama nama kelas yang ditentukan melalui CSS. Semasa memproses struktur HTML, anda sering menghadapi unsur yang berbeza ...
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
Dalam pembangunan front-end, bagaimana menggunakan CSS dan JavaScript untuk mencapai kesan pencahayaan yang serupa dengan antara muka tetapan Windows 10?
Apr 05, 2025 pm 10:21 PM
Cara melaksanakan Windows-like dalam pembangunan depan ...
