首頁  >  問答  >  主體

可以與任意選擇器組合使用的方法可以是在偽類 :nth-child() 或 :nth-of-type() 中使用另一個選擇器

<p>有沒有一種方法可以選擇每個滿足(或不滿足)任意選擇器的第n個子元素?例如,我想選擇每個奇數表格行,但在行的子集內:</p> <pre class="brush:css;toolbar:false;">table.myClass tr.row:nth-child(odd) { … } </pre> <pre class="brush:html;toolbar:false;"><table class="myClass"> <tr> <td>Row <tr class="row"> <!-- 我想要這個 --> <td>Row <tr class="row"> <td>Row <tr class="row"> <!-- 還有這個 --> <td>Row </table> </pre> <p>但是<code>:nth-child()</code>似乎只算所有的<code>tr</code>元素,而不管它們是否是"row"類的,所以我最終得到的是一個<em>偶數</em>的"row"元素,而不是我要找的兩個。同樣的情況也發生在<code>:nth-of-type()</code>上。 </p> <p>有人可以解釋為什麼嗎? </p>
P粉926174288P粉926174288455 天前607

全部回覆(2)我來回復

  • P粉466643318

    P粉4666433182023-08-15 14:26:12

    不是真的..

    來自文件的引用

    #

    它是一個獨立的選擇器,不與類別組合。在你的規則中,它只需要同時滿足兩個選擇器,所以如果:nth-child(even)表格行也有.row類,它將顯示。

    回覆
    0
  • P粉563446579

    P粉5634465792023-08-15 11:04:17

    這是一個非常常見的問題,它是由於對:nth-child(An B):nth-of-type()的工作原理的誤解而引起的。

    在選擇器3級中,:nth-child()偽類別計算的是在同一父元素下的所有同級元素中的位置,而不僅僅是匹配選擇器的其餘部分的同級元素。

    同樣地,:nth-of-type()偽類別計算的是與其共享相同元素類型的同級元素,這在HTML中是指標簽名,而不是選擇器的其餘部分。

    這也意味著,如果同一父元素的所有子元素都是相同的元素類型,例如表格主體只有tr元素或列表元素只有li元素,那麼:nth-child():nth-of-type()的行為將是相同的,即對於每個An B的值,:nth-child( An B):nth-of-type(An B)將符合相同的一組元素。

    事實上,在給定的複合選擇器中的所有簡單選擇器,包括:nth-child():not()等偽類,都是獨立工作的,而不是查看由選擇器的其餘部分匹配的子集元素。

    這也意味著在每個單獨的複合選擇器中,簡單選擇器之間沒有順序的概念#1,這意味著例如以下兩個選擇器是等價的:

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

    翻譯成英文,它們的意思都是:

    (你會注意到我在這裡使用了無序列表,只是為了強調這一點)

    #選擇器4級試圖透過允許:nth-child(An B of S)#2接受任意選擇器參數S來修正這個限制,這是由於選擇器在複合選擇器中獨立操作,根據現有的選擇器語法來決定。所以在你的情況下,它會是這樣的:

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

    當然,作為一個全新的提議在全新的規範中,這可能要等到幾年後才會實現

    同時,您將需要使用腳本來過濾元素並相應地套用樣式或額外的類別名稱。例如,以下是使用jQuery的常見解決方法(假設表格中只有一個包含tr元素的行組):

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

    對應的CSS為:

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

    如果您使用的是Selenium等自動化測試工具,或使用BeautifulSoup等工具來解析HTML,許多這些工具都允許使用XPath作為替代方法:

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

    使用不同技巧的其他解決方案留給讀者作為練習;這只是一個簡短的、刻意的範例。


    1 如果指定了類型或通用選擇器,則它必須放在第一位。然而,這並不會改變選擇器的基本工作原理;它只是一個語法上的怪癖。

    2 最初提出的是:nth-match(),然而,因為它仍然只計算相對於其同級元素,而不是與滿足給定選擇器的每個其他元素,所以自2014年以來,它已被重新用作現有的:nth-child()的擴展。

    回覆
    0
  • 取消回覆