Combinaison des sélecteurs: not () dans CSS

j'essaie de sélectionner tout tr éléments à l'intérieur d'un table, sauf le troisième et le quatrième. J'ai réussi à le faire en utilisant:

#table tr:not(:nth-child(3)):not(:nth-child(4))

j'aimerais combiner ces sélecteurs parce que j'ai quelques plus :nth-child entrées. Quelque chose comme ça, mais ça n'a pas marché:

#table tr:not(:nth-child(3), :nth-child(4))

travailler à jQuery, mais pas à CSS. J'utilise Chrome (et je n'en ai besoin que pour y travailler).

Je n'ai pas pu trouver de sélecteur de combinaison pour cette affaire. Comment puis-je combiner les sélecteurs avec <!--5?

26
demandé sur BoltClock 2011-09-13 18:00:01

2 réponses

sélecteurs le niveau 3 ne permet rien de plus qu'un seul simple sélecteur dans un :not() pseudo-classe. Comme un sélecteur jQuery, il fonctionne parce que jQuery étend son :not() fonctionnalité pour permettre à n'importe quel sélecteur (le .not() méthode).

cependant, votre seconde syntaxe est l'une des accessoires :not() dans les sélecteurs 4, et fonctionne de manière équivalente à la première. Bien que l'exemple (voir, à ce l'écriture de toute façon) montre une chaîne de :not() sélecteurs, la proposition dit:

la pseudo-classe de négation,: not (X), est une notation fonctionnelle prenant une liste de sélecteurs comme argument. Il représente un élément qui n'est pas représentée par son argument.

ici, une liste de sélecteurs est simplement une liste de sélecteurs séparés par des virgules.

si vous devez annuler les sélecteurs qui contiennent des combinateurs (>,+,~, l'espace, etc, par exemple div p), vous ne pouvez pas utiliser :not() en CSS, vous devrez choisir la solution jQuery.

30
répondu BoltClock 2012-09-06 14:04:13

bien que la réponse marquée soit vraie, je veux juste souligner que vous pouvez atteindre ce que vous voulez en utilisant css aussi, mais juste d'une manière différente. Au lieu d'utiliser non, vous pouvez les sélectionner et ne pas appliquer les choses que vous ne voulez pas.

#table tr {
    /* general case styling */
    color: blue;
}
#table tr:nth-child(3),
#table tr:nth-child(4) {
    color: black;
}
2
répondu OZZIE 2016-03-11 09:02:35