简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel CSS > le corps du texte

Comment styliser des éléments imbriqués spécifiques dans différentes structures parents ?

Barbara Streisand
Libérer： 2024-10-23 23:05:30
original
172 Les gens l'ont consulté

How to Style Specific Nested Elements across Different Parent Structures?

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>
Copier après la connexion


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

    • éléments dans le conteneur .foo :

      <code class="javascript">$('.foo li:eq(0), .foo li:eq(2)')</code>
      Copier après la connexion

      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>
<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>
      Copier après la connexion


source：php
Article précédent：Comment résoudre les problèmes de chevauchement de divisions avec z-index ? Article suivant：Pourquoi Border Radius ne fonctionne-t-il pas sur les images dans Chrome ?
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
2
1651
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
10
1805
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1533
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1441
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1491
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！