Style des éléments imbriqués du nième enfant sur plusieurs parents
À la recherche d'une solution pour styliser des éléments imbriqués spécifiques dans différentes structures parentales, considérez le balisage suivant :
<br><div class="foo"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><ul>
<li>one</li>
<li>two</li>
</ul>
<ul>
<li>three</li>
</ul>
<ul>
<li>four</li>
</ul>Le but est d'appliquer des styles à "un" et "trois", qu'ils soient ou non les premiers enfants de chaque
Limitation de :nth-child()
Les tentatives d'utilisation de :nth-child() échouent car elles ne s'appliquent qu'aux éléments qui partagent le même parent. Dans ce scénario, le sélecteur CSS .foo li:nth-child(1), .foo li:nth-child(3) ciblerait uniquement les premiers enfants de chaque
Solutions alternatives
JavaScript :
L'utilisation d'une bibliothèque comme jQuery vous permet de sélectionner des éléments à l'aide des puissantes capacités de filtrage de JavaScript. Par exemple, le script suivant ciblerait le premier et le troisième
<code class="javascript">$('.foo li:eq(0), .foo li:eq(2)')</code>Marquage explicite des éléments :
Vous pouvez marquer explicitement les éléments souhaités avec des classes ou des identifiants pour activer leur sélection via CSS. Par exemple, l'ajout de classes aux premier et troisième
<br><ul></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><li class="first">one</li> <li class="second">two</li>
<li class="third">three</li>
< ;/ul>
<li class="fourth">four</li>
Ensuite, vous pouvez utiliser CSS pour cibler les éléments marqués :
<code class="css">.foo .first,
.foo .third {
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
