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?
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.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 palsumengira 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
dantr
元素或列表元素只有li
元素,那么:nth-child()
和:nth-of-type()
的行为将是相同的,即对于每个An+B的值,:nth-child(An+B)
和:nth-of-type(An+B)
sahaja atau elemen senarai dengan elemenli
sahaja, maka tingkah lakuakan menjadi sama , iaitu, untuk setiap nilai An+B,
subset: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, termasukdan kelas pseudo seperti:not()
, berfungsisecara bebasdan bukannya dilihat oleh pemilih Selebihnya padananelemen.Ini juga bermaknabahawa dalam setiap pemilih kompaun individu tidak ada konsep susunan antara pemilih mudah
1, yang bermaksud contohnya dua pemilih berikut adalah setara:
Diterjemah ke dalam bahasa Inggeris, semuanya bermaksud:
(Anda akan perasan saya menggunakan senarai tidak tersusun di sini, hanya untuk menekankan perkara itu)
2:nth-child(An+B of S)
Pemilih tahap 4 cuba membetulkan pengehadan ini dengan membenarkanmenerima 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:
Sudah tentu, sebagai cadangan yang sama sekali baru dalam spesifikasi yang sama sekali baru, ini mungkin tidak akan dilaksanakan sehingga tahun.
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 elementr
):
CSS yang sepadan untukialah:
Jika anda menggunakan alat ujian automatik seperti Selenium, atau menggunakan alat seperti BeautifulSoup untuk menghuraikan HTML, kebanyakan alatan ini membenarkan penggunaan XPath sebagai alternatif:
Penyelesaian lain menggunakan teknik yang berbeza dibiarkan sebagai latihan kepada pembaca; ini hanyalah contoh ringkas dan disengajakan.1Jika jenis atau pemilih universal ditentukan, ia mesti didahulukan. Walau bagaimanapun, ini tidak mengubah kerja asas pemilih;
2pada asalnya dicadangkan sebagai lanjutan daripada
:nth-match()
,然而,因为它仍然只计算相对于其同级元素,而不是与满足给定选择器的每个其他元素,所以自2014年以来,它已被重新用作现有的:nth-child()
.