Kaedah yang boleh digabungkan dengan mana-mana pemilih adalah menggunakan pemilih lain dalam pseudo-class :nth-child() atau :nth-of-type()
Jennifer Aniston
Jennifer Aniston 2023-08-14 15:21:18
0
2
540

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?

Jennifer Aniston
Jennifer Aniston

membalas semua (2)
P粉466643318

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)表格行也有.rowkelas, ia akan ditunjukkan.

    P粉563446579

    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 elementr元素或列表元素只有li元素,那么:nth-child():nth-of-type()的行为将是相同的,即对于每个An+B的值,:nth-child(An+B):nth-of-type(An+B)sahaja atau elemen senarai dengan elemenlisahaja, 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, termasukdan kelas pseudo seperti:not(), berfungsisecara bebasdan bukannya dilihat oleh pemilih Selebihnya padanan

    subset

    elemen.Ini juga bermaknabahawa 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.

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

      Muat turun terkini
      Lagi>
      kesan web
      Kod sumber laman web
      Bahan laman web
      Templat hujung hadapan
      Tentang kita Penafian Sitemap
      Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!