Comment styliser des nièmes enfants spécifiques entre plusieurs parents en CSS

Style de nièmes enfants spécifiques sur plusieurs parents

Lorsque vous stylisez des éléments imbriqués à l'aide du sélecteur de nièmes enfants, il est crucial de noter que le sélecteur fonctionne dans un contexte monoparental. Cela peut entraîner des difficultés lors du ciblage d'éléments enfants spécifiques chez plusieurs parents.

Le problème :

Considérez le balisage suivant :

<div class="foo">
    <ul>
        <li>one</li>
        <li>two</li>
    </ul>
    <ul>
        <li>three</li>
    </ul>
    <ul>
        <li>four</li>
    </ul>
</div>

Le l'objectif est de styliser les premier et troisième éléments li dans .foo. En utilisant le CSS suivant :

.foo li:nth-child(1),
.foo li:nth-child(3)
{
    color: red;
}

Cette approche ne fonctionnera pas car le nième enfant sélectionne le premier et le troisième enfant de chaque ul.

La solution :

En utilisant CSS seul, il n'est pas possible de cibler des nièmes enfants entre plusieurs parents. Cependant, il existe des solutions alternatives :

• JavaScript : Les bibliothèques comme jQuery facilitent la manipulation des éléments du DOM et en sélectionnent des spécifiques, tels que $('.foo li:eq( 0), .foo li:eq(2)').
• Marquage explicite : Ajoutez explicitement des classes ou des identifiants aux premier et troisième éléments li, tels que :

<div class="foo">
    <ul>
        <li class="first">one</li>
        <li>two</li>
    </ul>
    <ul>
        <li class="third">three</li>
    </ul>
    <ul>
        <li>four</li>
    </ul>
</div>

Ensuite, stylisez-les en utilisant les classes nouvellement ajoutées :

.foo li.first,
.foo li.third
{
    color: red;
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!