Exemple de code pour le sélecteur de frères et sœurs pour implémenter les marges verticales

Comment le sélecteur de frères et sœurs peut garder CSS lisible tout en répondant à des exigences de conception complexes

C'est l'un des exemples du processus de développement frontal Web qui commence simple et devient progressivement plus compliqué : la conversion d'un article Des marges verticales (margesverticales) doivent être appliquées à tous les éléments, tels que les articles de blog compilés à partir de démarques complexes.

Dans la plupart des cas, vous devez faire face à de nombreuses exceptions et corrélations, telles que : les titres et les images ont généralement besoin de plus d'espace blanc au-dessus et en dessous, mais si deux images sont à côté l'une l'autre, alors les deux images L'espace blanc changera moins. La distance directe entre la balise h2 et la balise h3 est inférieure à la distance entre les deux balises h2.

Lorsque l'auteur original a commencé à travailler sur le front-end il y a quelques années, toutes ces exceptions et dépendances entraînaient toujours un code complexe, des incohérences visuelles et un comportement inattendu. J'ai cherché plusieurs fois sur Google pourquoi margin-top ne fonctionnait pas.

La première étape

Le code HTML simple est le suivant :

<article class="article">
  <h1>Hello World</h1>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet</p>
  <img src="…" alt="…">
  <p>Lorem ipsum dolor sit amet</p>
  <ul>
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
  </ul>

Supprimez généralement deux paragraphes pour ajuster la marge verticale entre eux, après avoir obtenu l'effet souhaité, utilisez cette valeur comme marge de base de tous les éléments.

.article > * + * { 
    margin-top: 1.5rem;
}

Le code CSS ci-dessus ajoute margin-top à tous les éléments enfants de .article qui ont des éléments frères adjacents. Seul l'ajout de l'attribut margin-top aux éléments directs évite les effets indésirables. Par exemple, dans le code HTML ci-dessus, margin-top sera ajouté à ul au lieu de li.

La deuxième étape

Dans cette étape, des règles CSS plus spécifiques seront ajoutées, telles que :

.article > img + * { 
    margin-top: 3rem;
}

après img Tout élément recevra une marge supérieure spécifique, l'effet est similaire à l'application de margin-bottom directement à l'img. Mais utiliser des sélecteurs frères et sœurs adjacents et margin-top présente deux avantages :

　1. Ne pas avoir à supprimer margin-bottom

du dernier processus enfant 2. Et éviter de s'effondrer margins.

Étape 3

Dans cette étape, ajoutez la règle à un élément spécifique, par exemple :

.article > * + h2 { 
    margin-top: 4rem;
}
.article > * + img { 
    margin-top: 3rem;
}

h2. et les img qui ont des frères et sœurs adjacents recevront une marge supérieure spécifique.

Étape 4

Dans cette dernière étape, gérez les styles avec une corrélation particulière

.article > img + img { 
    margin-top: 1rem; 
}

Changez l'espace entre les images adjacentes. distance

Si nécessaire, vous pouvez également ajouter un sélecteur css précis, tel que :

.article > img + img + img + h2 { 
    margin-top: 5rem;
}

Si un h2 est disposé en Après trois images consécutives, il recevra une marge supérieure spécifique. Heureusement, il ne s'agit que d'un cas particulier, mais il est bon de savoir que des sélecteurs frères et sœurs adjacents peuvent résoudre ce problème de dépendance complexe.

Utilisation avancée

Pour améliorer la lisibilité, utilisez l'imbrication (SCSS) et écrivez chaque règle sur une seule ligne. Il n'est pas nécessaire de regrouper les sélecteurs avec la même valeur car CSSO gérera cela plus tard dans la tâche de construction.

.article {
    > * + * { margin-top: 1.5rem }
    > h2 + * { margin-top: 1rem }
    > img + * { margin-top: 3rem }
    > * + h2 { margin-top: 4rem }
    > * + h3 { margin-top: 3.5rem }
    > * + img { margin-top: 3rem }
    > img + img { margin-top: 1rem }
    > h2 + h3 { margin-top: 4.5rem }
}

Cette technique fonctionne également avec SASS ou CSS, comme la grille de base. Si toutes les marges sont calculées à l'aide d'une margevariable spécifiée, il vous suffit de modifier la variable pour augmenter ou diminuer la marge globale.

Conclusion

Généralement lors du développement d'un site Web, vous rencontrerez des articles très complexes, qui incluent généralement des éléments tels que des titres de catégories, Introduction, texte ou des mises en page imbriquées. L'utilisation de sélecteurs frères adjacents et d'une marge supérieure unique peut résoudre des exigences de conception complexes tout en gardant CSS compréhensible, facilitant ainsi l'ajout ou l'ajustement de règles ultérieurement.

[Recommandations associées]

1. Tutoriel vidéo CSS en ligne gratuit

2. Manuel CSS en ligne

3. php.cn Dugu Jiujian (2) - tutoriel vidéo CSS

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!