Maison > Article > interface Web > Comment styliser des éléments imbriqués spécifiques dans différentes structures parents ?
Comment styliser des éléments imbriqués spécifiques dans différentes structures parents ?
- Barbara Streisandoriginal
- 2024-10-23 23:05:30255parcourir
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>
<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
- .
- éléments dans le conteneur .foo :
<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
- éléments :
<br><ul></p> <pre class="brush:php;toolbar:false"><li class="first">one</li> <li class="second">two</li>
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
<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!