Une méthode qui peut être combinée avec n'importe quel sélecteur consiste à utiliser un autre sélecteur dans la pseudo-classe :nth-child() ou :nth-of-type()

Question

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

table.myClass tr.row:nth-child(impair) {
  ...
}
≪/pré>

  

    
Ligne
  
 
    
Ligne
  

    
Ligne
  
 
    
Ligne

≪/pré>
Mais :nth-child() ne semble compter que tous les éléments tr Ce que j'obtiens est un élément even La même chose se produit avec :nth-of-type(). 
Quelqu’un peut-il expliquer pourquoi ? 

Answer 1

Ce n'est pas vrai..

Citation de la documentation

Il s'agit d'un sélecteur autonome, non combiné avec une classe. Dans votre règle, il suffit de satisfaire les deux sélecteurs, donc si :nth-child(even)表格行也有.row classe, cela se verra.

Answer 2

C'est une question très courante qui découle d'une incompréhension du fonctionnement de :nth-child(An+B)和:nth-of-type().

Dans le sélecteur de niveau 3, la :nth-child()pseudo-classe calcule la position parmi tous les frères et sœurs sous le même élément parent, pas seulement ceux qui correspondent au reste du sélecteur.

De même, la :nth-of-type()pseudo-classe compte les frères et sœurs avec lesquels elle partage le même type d'élément, qui en HTML est la signature de l'indicateur, pas le reste du sélecteur.

Cela signifie également que si tous les éléments enfants du même élément parent sont du même type d'élément, par exemple un corps de table avec seulement tr元素或列表元素只有li元素，那么:nth-child()和:nth-of-type()的行为将是相同的，即对于每个An+B的值，:nth-child(An+B)和:nth-of-type(An+B) éléments ou un élément de liste avec uniquement des éléments li, alors le comportement de

et

seront identiques, c'est-à-dire que pour chaque valeur de An+B, :nth-child(An+B) et :nth-of-type(An+B) correspondra de la même manière à un ensemble d'éléments. :nth-child()和:not() En fait, tous les sélecteurs simples au sein d'un sélecteur composé donné, y compris et les pseudo-classes telles que :not(), fonctionnent indépendamment plutôt que d'être visualisés par le sélecteur. Le reste de la correspondance

sous-ensemble

éléments. Cela signifie également ^{qu'au sein de chaque sélecteur composé individuel, il n'y a aucune notion d'ordre entre les sélecteurs simples}

1

, 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'ai utilisé une liste non ordonnée ici, juste pour souligner ce point)

:nth-child(An+B of S)Selector niveau 4 tente de corriger cette limitation en permettant à

2

d'accepter des arguments de sélecteur arbitraires S, en raison du fonctionnement indépendant des sélecteurs au sein des sélecteurs composés, tel que déterminé par la syntaxe du sélecteur existant. Donc dans votre cas, cela ressemblerait à ceci :

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

Bien sûr, en tant que proposition complètement nouvelle dans une spécification complètement nouvelle, cela ne sera peut-être pas mis en œuvre avant

ans

. tr

En attendant, vous devrez utiliser un script pour filtrer les éléments et appliquer des styles ou des noms de classes supplémentaires en conséquence. Par exemple, voici une solution de contournement courante utilisant jQuery (en supposant qu'il n'y ait qu'un seul groupe de lignes dans le tableau contenant l'élément

) :

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

Le CSS correspondant pour

est :

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

Si vous utilisez un outil de test automatisé comme Selenium, ou un outil comme BeautifulSoup pour analyser le HTML, beaucoup de ces outils permettent l'utilisation de 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 en exercice au lecteur ; il ne s'agit que d'un exemple bref et délibéré. 🎜

---

¹ _{Si un sélecteur de type ou universel est spécifié, il doit venir en premier. Cependant, cela ne change pas le fonctionnement de base des sélecteurs ; c'est juste une bizarrerie de syntaxe.}

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