Comment appliquer des styles CSS à des éléments spécifiques avec des structures enfants variables ?

Style sur plusieurs parents avec :nth-child

Problème :

S'assurer que les sélecteurs CSS affectent des éléments spécifiques sur plusieurs les parents avec différentes structures d’éléments enfants peuvent être difficiles. Prenons l'exemple suivant :

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

L'objectif est d'appliquer un style spécifique aux éléments de liste « un » et « trois ». Cependant, l'utilisation des sélecteurs :nth-child(1) et :nth-child(3) entraîne le style des premier et troisième éléments de la liste dans chaque élément ul.

Solution :

Malheureusement , les sélecteurs CSS ne peuvent pas à eux seuls gérer de telles variations dans les structures parent-enfant. Le sélecteur :nth-child() et les combinateurs frères et sœurs sont limités à la sélection d'éléments au sein du même parent.

Approches alternatives :

• JavaScript : Bibliothèques telles que jQuery peut être utilisé pour cibler des éléments spécifiques en fonction de leur index ou de leur position dans le DOM.
• Marquage explicite : L'ajout de classes ou d'identifiants aux éléments souhaités (un et trois dans ce cas) permet pour un ciblage précis à l'aide de sélecteurs CSS.

Par exemple, en ajoutant la classe "selected" aux premier et troisième éléments de la liste dans l'élément .foo :

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

CSS :

<code class="css">.foo li.selected {
    color: red;
}</code>

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!