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

<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>

  <style>
    body {
      font: 16px/1.5 sans-serif;
    }
    :first-child {
      color: #e91e63;
    }
    :last-child {
      color: #4caf50;
    }
  </style>
  <h2>List of fruits</h2>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Blueberries</li>
    <li>Oranges</li>
    <li>Strawberries</li>
  </ul>
</code>

kerana

tidak terhad, elemen

dan elemen 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.

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

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

<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>

  <style>
    body {
      font: 16px/1.5 sans-serif;
    }
    :first-child {
      color: #e91e63;
    }
    :last-child {
      color: #4caf50;
    }
  </style>
  <h2>List of fruits</h2>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Blueberries</li>
    <li>Oranges</li>
    <li>Strawberries</li>
  </ul>
</code>

Switching

ke

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:

<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>

  <style>
    body {
      font: 16px/1.5 sans-serif;
    }
    :first-child {
      color: #e91e63;
    }
    :last-child {
      color: #4caf50;
    }
  </style>
  <h2>List of fruits</h2>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Blueberries</li>
    <li>Oranges</li>
    <li>Strawberries</li>
  </ul>
</code>

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.

<code class="language-css">tr:nth-child(even) {
  background: rgba(96, 125, 139, 0.1);
}</code>

Terdapat tempat di mana perkara menjadi lebih menarik. Kita boleh menggunakan 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.

<code class="language-css">.item:nth-child(6) {
  background: #e91e63;
}</code>

NOTA: Offset negatif

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.

<code class="language-css">.item:nth-child(3n) {
  background: #e91e63;
}</code>

Jika elemen adalah kanak-kanak yang unik 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 <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.

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

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

<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>

  <style>
    body {
      font: 16px/1.5 sans-serif;
    }
    :first-child {
      color: #e91e63;
    }
    :last-child {
      color: #4caf50;
    }
  </style>
  <h2>List of fruits</h2>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Blueberries</li>
    <li>Oranges</li>
    <li>Strawberries</li>
  </ul>
</code>

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.

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:

<code class="language-html"><meta charset="utf-8">
<title>:first-child and :last-child</title>

  <style>
    body {
      font: 16px/1.5 sans-serif;
    }
    :first-child {
      color: #e91e63;
    }
    :last-child {
      color: #4caf50;
    }
  </style>
  <h2>List of fruits</h2>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Blueberries</li>
    <li>Oranges</li>
    <li>Strawberries</li>
  </ul>
</code>

Seperti yang ditunjukkan dalam imej berikut, kini perenggan kami akan mempunyai surat modal awal, walaupun ia didahului oleh tajuk.

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

<code class="language-css">tr:nth-child(even) {
  background: rgba(96, 125, 139, 0.1);
}</code>

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.

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

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. <p></p>

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!