Kaedah yang boleh digabungkan dengan mana-mana pemilih adalah menggunakan pemilih lain dalam pseudo-class :nth-child() atau :nth-of-type()

Question

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

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


  

    
Baris
  
 
    
Baris
  

    
Baris
  
 
    
Baris


Tetapi :nth-child() nampaknya hanya mengira semua tr Apa yang saya dapat ialah satu even elemen "baris", bukan dua yang saya cari. Perkara yang sama berlaku dengan :nth-of-type(). 
Bolehkah sesiapa menerangkan sebabnya? 
            

Answer 1

Tidak benar..

Petikan daripada dokumentasi

Ia adalah pemilih kendiri, tidak digabungkan dengan kelas. Dalam peraturan anda, ia hanya perlu memenuhi kedua-dua pemilih, jadi jika :nth-child(even)表格行也有.row kelas, ia akan ditunjukkan.

Answer 2

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

Dalam tahap pemilih 3, :nth-child()kelas palsu mengira kedudukan antara semua adik-beradik di bawah elemen induk yang sama, bukan hanya yang sepadan dengan pemilih yang lain.

Begitu juga, :nth-of-type()pseudo-classmengira adik beradik yang ia berkongsi jenis elemen yang sama, yang dalam HTML ialah tandatangan penunjuk, bukan pemilih yang lain.

Ini juga bermakna jika semua elemen anak daripada elemen induk yang sama adalah daripada jenis elemen yang sama, contohnya badan jadual dengan elemen tr元素或列表元素只有li元素，那么:nth-child()和:nth-of-type()的行为将是相同的，即对于每个An+B的值，:nth-child(An+B)和:nth-of-type(An+B) sahaja atau elemen senarai dengan elemen li sahaja, maka tingkah laku

dan

akan menjadi sama , iaitu, untuk setiap nilai An+B, :nth-child(An+B) dan :nth-of-type(An+B) akan sepadan dengan set elemen yang sama. :nth-child()和:not() Malah, semua pemilih mudah dalam pemilih kompaun tertentu, termasuk dan kelas pseudo seperti :not(), berfungsi secara bebas dan bukannya dilihat oleh pemilih Selebihnya padanan

subset

elemen. Ini juga bermakna ^{bahawa dalam setiap pemilih kompaun individu tidak ada konsep susunan antara pemilih mudah}

1

, yang bermaksud contohnya dua pemilih berikut adalah setara:

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 menekankan perkara itu)

:nth-child(An+B of S)Pemilih tahap 4 cuba membetulkan pengehadan ini dengan membenarkan

2

menerima hujah pemilih sewenang-wenangnya S, disebabkan pemilih yang beroperasi secara bebas dalam pemilih kompaun, seperti yang ditentukan oleh sintaks pemilih sedia ada. Jadi dalam kes anda ia akan kelihatan seperti ini:

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

Sudah tentu, sebagai cadangan yang sama sekali baru dalam spesifikasi yang sama sekali baru, ini mungkin tidak akan dilaksanakan sehingga

tahun

. tr

Sementara itu, anda perlu menggunakan skrip untuk menapis elemen dan menggunakan gaya atau nama kelas tambahan dengan sewajarnya. Sebagai contoh, berikut ialah penyelesaian biasa menggunakan jQuery (dengan mengandaikan hanya terdapat satu kumpulan baris dalam jadual yang mengandungi elemen

):

$('table.myClass').each(function() {
  // 注意，令人困惑的是，jQuery的过滤伪类是从0开始索引的，而CSS的:nth-child()是从1开始索引的
  $('tr.row:even').addClass('odd');
});

CSS yang sepadan untuk

ialah:

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

Jika anda menggunakan alat ujian automatik seperti Selenium, atau menggunakan alat seperti BeautifulSoup untuk menghuraikan HTML, 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 yang berbeza dibiarkan sebagai latihan kepada pembaca; ini hanyalah contoh ringkas dan disengajakan. 🎜

---

¹ _{Jika jenis atau pemilih universal ditentukan, ia mesti didahulukan. Walau bagaimanapun, ini tidak mengubah kerja asas pemilih;}

² _{pada asalnya dicadangkan sebagai lanjutan daripada :nth-match()，然而，因为它仍然只计算相对于其同级元素，而不是与满足给定选择器的每个其他元素，所以自2014年以来，它已被重新用作现有的:nth-child().}