Est-il possible d'utiliser :nth-child() ou :nth-of-type() avec n'importe quel sélecteur ?

Question

Existe-t-il un moyen de sélectionner le nième élément enfant qui correspond (ou ne correspond pas) à un sélecteur arbitraire ? Par exemple, je souhaite sélectionner chaque ligne impaire d'un tableau, mais dans un sous-ensemble de lignes :

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>

Mais :nth-child() semble simplement compter tous les éléments tr, qu'ils soient ou non de la classe "row", donc je me retrouve avec un :nth-child() 似乎只是计算所有 tr 元素，无论它们是否属于“row”类，所以我最终得到了一个 even “行”元素而不是我正在寻找的两个元素。 :nth-of-type()even

" row" au lieu des deux éléments que je recherche. La même chose se produit avec :nth-of-type().

Quelqu’un peut-il expliquer pourquoi ? 🎜

Answer 1

Ce n'est pas vrai..

Cité de la documentation

C'est son propre sélecteur, non combiné avec une classe. Dans votre règle, il suffit de satisfaire les deux sélecteurs, donc si une ligne de table :nth-child(even) a également une classe .row.

Answer 2

C'est une question très courante qui se pose en raison d'une mauvaise compréhension du fonctionnement de :nth-child(An+B) 和 :nth-of-type().

Dans les sélecteurs de niveau 3, la :nth-child () pseudo-classe compte tous les frères et sœurs d'un même parent. Il ne compte pas seulement les frères et sœurs qui correspondent au reste du sélecteur.

De même, la :nth-of- type() pseudo-classe compte les éléments frères qui partagent le même type d'élément, qui fait référence au nom de la balise dans le HTML plutôt qu'au reste du sélecteur.

Cela signifie également que si tous les enfants du même parent ont le même type d'élément, par exemple, un corps de table dont le seul enfant est tr 元素，或者列表元素的唯一子级是子元素是 li 元素，那么 :nth-child() 和 :nth-of-type() 将表现相同，即对于每个值An+B、:nth-child(An+B) 和 :nth-of-type(An+B) correspondra au même ensemble d'éléments.

En fait, tous les sélecteurs simples (y compris les pseudo-classes telles que :nth-child() 和 :not()) au sein d'un sélecteur composé donné fonctionnent indépendamment les uns des autres , plutôt que de regarder un sous-ensemble d'éléments qui correspondent au reste du sélecteur.

Cela signifie également qu'il n'y a pas de notion d'ordre entre les sélecteurs simples au sein de chaque sélecteur composé individuel ¹, ce qui signifie que par exemple les deux sélecteurs suivants sont équivalents :

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

Traduits en anglais, ils signifient tous :

^{(Vous remarquerez que j'utilise ici une liste non ordonnée, juste pour faire comprendre le point)}

Le niveau de sélecteur 4 tente d'accepter des paramètres de sélecteur arbitraires S en autorisant 来纠正此限制:nth-child(An+B of S)², encore une fois en raison de la façon dont les sélecteurs dans les sélecteurs composés fonctionnent indépendamment les uns des autres, comme déterminé par la syntaxe de sélecteur existante ci-dessous. Donc dans votre cas, cela ressemblerait à ceci :

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

Bien sûr, en tant que toute nouvelle proposition dans une toute nouvelle spécification, cela ne sera peut-être pas mis en œuvre avant $('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'); });

Utilisez le CSS correspondant :

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

Si vous utilisez des outils de test automatisés comme Selenium ou si vous grattez du HTML avec des outils comme BeautifulSoup, beaucoup de ces outils permettent d'utiliser XPath comme alternative :

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

D'autres solutions utilisant des techniques différentes sont laissées à titre d'exercice au lecteur ; il ne s'agit que d'un bref exemple artificiel à titre d'illustration.

---

¹ _{Si vous spécifiez un sélecteur de type ou universel, il doit venir en premier. Cependant, cela ne change pas le fonctionnement fondamental des sélecteurs. Ce n’est rien de plus qu’une bizarrerie grammaticale.}

² _{Ceci a été initialement proposé comme une extension de :nth-match()，但是因为它仍然只计算相对于其兄弟元素的元素，而不是相对于每个元素与给定选择器匹配的其他元素，自 2014 年起它已被重新用作现有 :nth-child().}