CSS Pseudo-Classes: Elemen Gaya Berdasarkan Indeks mereka-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

CSS Pseudo-Classes: Elemen Gaya Berdasarkan Indeks mereka

Lisa Kudrow

Feb 19, 2025 am 11:26 AM

pemilih CSS: Pemilihan kelas pseudo berdasarkan kedudukan elemen dalam subtree dokumen

CSS Pseudo-classes: Styling Elements Based on Their Index

mata teras

, :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 kunci odd, even kata kunci, integer, atau An B, di mana A adalah selang langkah dan b adalah yang Peralihan bias, n adalah integer positif.
:only-child kelas 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

anda dapat melihat apa yang kelihatan seperti dalam gambar di bawah.

<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 CSS Pseudo-classes: Styling Elements Based on Their Index pertama berwarna merah jambu. Lagipun,

adalah elemen anak pertama

, 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.

CSS Pseudo-classes: Styling Elements Based on Their Index

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()

seperti

, :not() dan :nth-child() juga berfungsi kelas pseudo. Mereka menerima parameter yang sepatutnya: :nth-last-child()

Kata kunci odd
Kata kunci even
Parameter dalam bentuk
, di mana A adalah selang langkah, B adalah offset, dan n ialah pembolehubah yang mewakili integer positif. An B

Item terakhir mempunyai beberapa kerumitan. Kami akan membincangkannya kemudian.

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. CSS Pseudo-classes: Styling Elements Based on Their Index

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>

Ini memberi kita hasil berikut.

~~Tetapi bagaimana jika kita mahu memilih setiap tiga elemen? Di sinilah~~

tatabahasa dimainkan:

An B

Begitu juga, A adalah selang panjang langkah. Ia hampir seperti pengganda N, bermula dengan 1. Oleh itu, jika A = 3, maka 3N akan sepadan dengan elemen seperti 3, 6, 9. Inilah yang berlaku, seperti yang anda lihat di bawah.

tr:nth-child(even) {
  background: rgba(96, 125, 139, 0.1);
}

Terdapat tempat di mana perkara menjadi lebih menarik. Kita boleh menggunakan CSS Pseudo-classes: Styling Elements Based on Their Index dan

untuk memilih semua elemen selepas satu titik. Mari cuba pilih semua elemen kecuali tujuh elemen pertama:

: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;
}

NOTA: Offset negatif

CSS Pseudo-classes: Styling Elements Based on Their Index Nilai offset dan julat negatif juga sah. Menggunakan

akan membalikkan pemilihan kami dan sepadan dengan lapan elemen pertama.

kita juga boleh memilih setiap tiga elemen menggunakan nilai offset dan saiz langkah, bermula dari yang kelima:

:nth-child(-n 8)

anda dapat melihat hasil pemilih ini dalam imej berikut.

.item:nth-child(3n) {
  background: #e91e63;
}

Jika elemen adalah kanak-kanak yang unik CSS Pseudo-classes: Styling Elements Based on Their Index s unik dari elemen lain, maka

pseudo-class sepadan dengan elemen itu. Berikut adalah dua senarai yang tidak teratur. Yang pertama mempunyai projek, manakala yang kedua mengandungi tiga:

`: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  akan dipadankan, tetapi <code>  <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.

mari kita mulakan dengan dokumen yang sedikit berbeza. Ia masih mempunyai 20 item, tetapi sebahagian daripadanya adalah elemen p dan ada yang div elemen. Elemen P mempunyai sudut bulat seperti yang ditunjukkan di bawah.

p:nth-child(5) p:nth-of-type(5)

Gunakan

dan

CSS Pseudo-classes: Styling Elements Based on Their Index

Menggunakan

, 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>

kelas pseudo berfungsi sama, yang sepadan dengan elemen terakhir elemen induknya, seperti yang ditunjukkan di bawah. Walau bagaimanapun, jika elemen adalah

s unik

elemen induknya, maka

akan sepadan dengan elemen itu seperti yang ditunjukkan di bawah. CSS Pseudo-classes: Styling Elements Based on Their Index

CSS Pseudo-classes: Styling Elements Based on Their Index

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.

CSS Pseudo-classes: Styling Elements Based on Their Index

Gunakan

dan :nth-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);
}

Seperti yang anda lihat dari imej di bawah, ini hanya akan sepadan dengan elemen P ganjil, bukan elemen kanak -kanak bernombor ganjil.

~~Begitu juga, gunakan~~

untuk memilih elemen P yang bernombor, tetapi kiraan bermula dengan elemen P terakhir dalam dokumen - dalam hal ini item 18 (lihat di bawah).

: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. CSS Pseudo-classes: Styling Elements Based on Their Index

[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 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).

Apakah perbezaan antara

`: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  akan memilih elemen kedua <code>p:nth-of-type(2) , dan tanpa mengira kedudukan dalam unsur -unsur saudara yang lain. 

Bagaimana untuk memilih elemen pertama, kedua atau ketiga menggunakan nama kelas yang diberikan?

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)

Bolehkah saya menggunakan nilai negatif dalam

? `:nth-child`

tidak,

nilai negatif tidak dibenarkan. Nilai minimum yang boleh anda gunakan ialah 0, yang tidak memilih sebarang elemen. :nth-child

Bagaimana untuk memilih setiap elemen yang lebih baik atau ganjil?

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)

Bolehkah saya menggunakan

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

Bolehkah saya menggunakan

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

Semua gambar kekal dalam format dan lokasi asalnya.

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!

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

Artikel Berkaitan

Pembaca Skrin Demystifying: Borang & Amalan Terbaik DiaksesMar 08, 2025 am 09:45 AM

Ini adalah jawatan ke -3 dalam siri kecil yang kami lakukan dalam kebolehcapaian bentuk. Jika anda terlepas jawatan kedua, lihat "Menguruskan Fokus Pengguna dengan: Fokus-Visible". Dalam

Buat borang hubungan JavaScript dengan rangka kerja pintarMar 07, 2025 am 11:33 AM

Tutorial ini menunjukkan mewujudkan bentuk JavaScript yang berpandangan profesional menggunakan rangka kerja pintar (nota: tidak lagi tersedia). Walaupun kerangka itu sendiri tidak tersedia, prinsip dan teknik tetap relevan untuk pembina bentuk lain.

Menambah bayang -bayang kotak ke blok dan elemen WordPressMar 09, 2025 pm 12:53 PM

CSS box-shadow dan garis besar sifat mendapat tema.json Sokongan dalam WordPress 6.1. Let ' s melihat beberapa contoh bagaimana ia berfungsi dalam tema sebenar, dan pilihan apa yang kita perlu gunakan gaya ini ke blok dan elemen WordPress.

Bekerja dengan Caching GraphqlMar 19, 2025 am 09:36 AM

Sekiranya anda baru -baru ini mula bekerja dengan GraphQL, atau mengkaji semula kebaikan dan keburukannya, anda tidak akan ragu -ragu mendengar perkara seperti "Graphql tidak menyokong caching" atau

Menjadikan Peralihan Svelte Khas pertama andaMar 15, 2025 am 11:08 AM

API Peralihan Svelte menyediakan cara untuk menghidupkan komponen apabila mereka memasuki atau meninggalkan dokumen, termasuk peralihan svelte adat.

CSS Scrollbars Custom Custom: PameranMar 10, 2025 am 11:37 AM

Dalam artikel ini kita akan menyelam ke dunia scrollbars. Saya tahu, ia tidak terdengar terlalu glamor, tetapi percayalah, halaman yang direka dengan baik

Tunjukkan, jangan beritahuMar 16, 2025 am 11:49 AM

Berapa banyak masa yang anda habiskan untuk merancang persembahan kandungan untuk laman web anda? Semasa anda menulis catatan blog baru atau membuat halaman baru, adakah anda memikirkan

Apa yang ada perintah npm?Mar 15, 2025 am 11:36 AM

Perintah NPM menjalankan pelbagai tugas untuk anda, sama ada sebagai satu-satunya atau proses berjalan terus untuk perkara seperti memulakan pelayan atau menyusun kod.

See all articles

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

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

2 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

1 bulan yang laluByDDD

R.E.P.O. Simpan Fail Lokasi: Di manakah & bagaimana untuk melindunginya?

1 bulan yang laluByDDD

R.E.P.O. Tetapan grafik terbaik

2 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

1 minggu yang laluByDDD

Tunjukkan Lagi

Alat panas

EditPlus versi Cina retak

Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 Linux versi baharu

SublimeText3 Linux versi terkini

mPDF

mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),

Tunjukkan Lagi