Adakah mungkin untuk menggunakan :nth-child() atau :nth-of-type() dengan mana-mana pemilih?

Question

Adakah terdapat cara untuk memilih elemen anak ke-1 yang sepadan (atau tidak sepadan) dengan pemilih sewenang-wenangnya? Contohnya, saya ingin memilih setiap baris jadual ganjil, tetapi dalam subset baris:

table.myClass tr.row:nth-child(odd) {
  ...
}

<table class="myClass">
  <tr>
    <td>Row
  <tr class="row"> <!-- I want this -->
    <td>Row
  <tr class="row">
    <td>Row
  <tr class="row"> <!-- And this -->
    <td>Row
</table>

Tetapi :nth-child() nampaknya hanya mengira semua elemen tr tanpa mengira sama ada ia daripada kelas "row", jadi saya mendapat :nth-child() 似乎只是计算所有 tr 元素，无论它们是否属于“row”类，所以我最终得到了一个 even “行”元素而不是我正在寻找的两个元素。 :nth-of-type()even

" row" dan bukannya dua elemen yang saya cari. Perkara yang sama berlaku dengan :nth-of-type().

Boleh sesiapa jelaskan kenapa? 🎜

Answer 1

Tidak benar..

Dipetik daripada dokumentasi

Ia adalah pemilih sendiri, tidak digabungkan dengan kelas. Dalam peraturan anda, ia hanya perlu memenuhi kedua-dua pemilih, jadi jika baris :nth-child(even) jadual juga kebetulan mempunyai kelas .row代码>.

Answer 2

Ini adalah soalan yang sangat biasa yang timbul kerana salah faham tentang cara :nth-child(An+B) 和 :nth-of-type() berfungsi.

Dalam pemilih tahap 3, :nth-child () pseudo-class dikira semua adik di bawah ibu bapa yang sama. Ia bukan sahaja mengira adik-beradik yang sepadan dengan pemilih yang lain.

Begitu juga, :nth-of- type() pseudo-class mengira elemen adik beradik yang berkongsi jenis elemen yang sama, yang merujuk kepada nama teg dalam HTML dan bukannya pemilih yang lain.

Ini juga bermakna jika semua anak daripada ibu bapa yang sama mempunyai jenis elemen yang sama, contohnya, badan meja yang anak tunggalnya tr 元素，或者列表元素的唯一子级是子元素是 li 元素，那么 :nth-child() 和 :nth-of-type() 将表现相同，即对于每个值An+B、:nth-child(An+B) 和 :nth-of-type(An+B) akan sepadan dengan set elemen yang sama. p>

Malah, semua pemilih mudah (termasuk kelas pseudo seperti :nth-child() 和 :not()) dalam pemilih kompaun tertentu berfungsi secara bebas antara satu sama lain , dan bukannya melihat subset elemen yang sepadan dengan pemilih yang lain.

Ini juga bermakna bahawa tiada konsep tertib antara pemilih mudah dalam setiap pemilih kompaun individu ¹, yang bermaksud contohnya dua pemilih berikut adalah setara: p>

table.myClass tr.row:nth-child(odd)
table.myClass tr:nth-child(odd).row

Diterjemah ke dalam bahasa Inggeris, semuanya bermaksud:

^{(Anda akan perasan saya menggunakan senarai tidak tersusun di sini, hanya untuk membawa pulang maksudnya)}

Pemilih tahap 4 cuba menerima parameter pemilih sewenang-wenangnya S dengan membenarkan 来纠正此限制:nth-child(An+B of S)², sekali lagi disebabkan oleh cara pemilih dalam pemilih kompaun beroperasi secara bebas antara satu sama lain, seperti yang ditentukan oleh sintaks pemilih sedia ada di bawah. Jadi dalam kes anda ia akan kelihatan seperti ini:

table.myClass tr:nth-child(odd of .row)

Sudah tentu, sebagai cadangan serba baharu dalam spesifikasi serba baharu, ini mungkin tidak dilaksanakan sehingga $('table.myClass').each(function() { // Note that, confusingly, jQuery's filter pseudos are 0-indexed // while CSS :nth-child() is 1-indexed $('tr.row:even').addClass('odd'); });

Gunakan CSS yang sepadan:

table.myClass tr.row.odd {
  ...
}

Jika anda menggunakan alat ujian automatik seperti Selenium atau mengikis HTML dengan alatan seperti BeautifulSoup, kebanyakan alatan ini membenarkan penggunaan XPath sebagai alternatif:

//table[contains(concat(' ', @class, ' '), ' myClass ')]//tr[contains(concat(' ', @class, ' '), ' row ')][position() mod 2)=1]

Penyelesaian lain menggunakan teknik berbeza dibiarkan sebagai latihan kepada pembaca ini hanyalah contoh ringkas yang direka untuk ilustrasi.

---

¹ _{Jika anda menentukan jenis atau pemilih universal, ia mesti didahulukan. Walau bagaimanapun, ini tidak mengubah cara asas pemilih berfungsi. Ini tidak lebih daripada keanehan tatabahasa.}

² _{Ini pada asalnya dicadangkan sebagai lanjutan kepada :nth-match()，但是因为它仍然只计算相对于其兄弟元素的元素，而不是相对于每个元素与给定选择器匹配的其他元素，自 2014 年起它已被重新用作现有 :nth-child().}