CSS n’est pas : d’abord-sélecteur enfant

Question

J’ai la balise div et lui est plusieurs balises ul.

Si je tente la valeur des propriétés css uniquement pour la première balise ul, copiez le code suivant fonctionne :

Mais quand j’ai envie de définir des propriétés css chaque balises ul, sauf la première, j’ai essayé ceci :

aussi cela

et ce

Mais aucun effet. Quelqu'un dire s’il vous plaît, comment doit écrire en css : « chaque élément, sauf premier » ?

Answer 1

L'une des versions que vous avez posté, en fait, il fonctionne pour tous les navigateurs modernes (où les sélecteurs CSS niveau 3 sont pris en charge):

div ul:not(:first-child) {
    background-color: #900;
}

Si vous avez besoin de soutenir les anciens navigateurs, ou si vous êtes gêné par l' :not du sélecteur de limitation (il n'accepte qu'un simple sélecteur comme argument), alors vous pouvez utiliser une autre technique:

Définir une règle qui a une plus grande portée que ce que vous voulez et ensuite de "révoquer" il conditionnellement, en limitant sa portée à ce qui vous avez l'intention:

div ul {
    background-color: #900;  /* applies to every ul */
}

div ul:first-child {
    background-color: transparent; /* limits the scope of the previous rule */
}

Lorsque la limitation de la portée de l'utilisation de la valeur par défaut pour chaque attribut CSS que vous définissez.

Answer 2

Cette CSS2 solution ("tout ul après l'autre ul") fonctionne, trop, et est pris en charge par plusieurs navigateurs.

div ul + ul {
  background-color: #900;
}

Contrairement aux :not et :nth-sibling, le adjacents sélecteur de frères est pris en charge par IE7+.

Si vous avez JavaScript modifications de ces propriétés après le chargement de la page, vous devriez regarder quelques bugs connus dans le IE7 et IE8 implémentations de cette. Voir ce lien.

Pour toute page web statique, cela devrait fonctionner parfaitement.

Answer 3

Eh bien, puisque :not n'est pas acceptée par IE6~8, je vous suggère ceci:

div ul:nth-child(n+1) {
    background-color: #900;
}

Si vous chercher chaque ul dans son élément parent à l'exception du premier.

Reportez-vous à Chris Coyer est "Utile :nth-child Recettes" de l'article pour plus d' nth-child exemples.

Answer 4

 div li~li {
    color: red;
}
 

Supporte IE7