Code pratique du sélecteur de premier enfant CSS3

Cet article présente la stratégie pratique du sélecteur de premier enfant CSS3, y compris la différence entre premier-enfant et :premier-de-enfant ainsi que les problèmes de compatibilité IE Pour explication, les amis qui en ont besoin peuvent se référer au sélecteur

:first-child

en CSS pour sélectionner le premier groupe d'objets (même parent) d'un élément spécifique
HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<hr>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

CSS

// 只套用编号 1 的 li   
li:first-child {   
    color: green;   
}

La différence entre premier-enfant et :premier-de -child
Supposons que nous ayons un morceau de code HTML comme celui-ci :

<p>
    <p>第1个元素</p>
    <h1>第2个元素</h1>
    <span>第3个元素</span>
    <span>第4个元素</span>
</p>

Sélecteur CSS :
Nous voulez trouver l'élément, si vous utilisez la méthode définition suivante -
p:first-child, l'élément p sera mis en correspondance, car l'élément p est le premier élément enfant de p h1:first- child ne peut correspondre à aucun élément, car ici h1 est le deuxième élément enfant de p, pas le premier
span:first-child ne peut correspondre à aucun élément, car aucun des éléments span ici n'est de p Le premier enfant ; element;
:first-child correspond à l'élément p, car le premier élément enfant de p ici est p.
Deux des
styles appliqués ci-dessus ne peuvent pas correspondre, mais pas de panique, CSS définit également : premier-enfant pseudo-classe , veuillez y jeter un oeil Utilisation et explication : p
:first-of-type correspond à l'élément p, car p est le premier de tous les éléments enfants de p. En fait, il n'y a qu'un élément enfant de p h1:first-of-type correspond à l'élément h1, car h1 est le premier de tous les éléments enfants de p qui est h1. En fait, il n'y a qu'un seul élément enfant h1 ici span:first-of. -type correspond à la durée du troisième élément enfant. Ici, p a deux éléments enfants qui sont des spans, et le premier correspond.
:first-of-type correspond à l'élément p

Résumé
: :first-child correspond au premier élément enfant d'un élément parent, qui peut être considéré comme une structure le premier élément enfant activé. :first-of-type correspond au premier du type. À quoi fait référence le type ? C'est ce qui correspond avant les deux points. Par exemple, p:first-of-type fait référence au premier de tous p. éléments. Il n'y a pas de limite au premier élément enfant ici, tant qu'il s'agit du premier élément de ce type. Bien entendu, la portée de ces éléments appartient tous au même niveau, c'est-à-dire les pairs.
Le même type de sélecteurs :last-child et
:last-of-type
, :nth-child(n) et :nth-of-type(n) peuvent également être compris de cette manière .

Problèmes de compatibilité avec IE
Regardez d'abord le morceau de code suivant, la partie HTML :

<ul class="example">
    <li>aa</li>
    <li>bb</li>
    <li>cc</li>
    <li>dd</li>
</ul>

Partie CSS :

.example li{float:left;margin-left:10px;}

Si vous devez définir la marge gauche du premier li sur 0px, vous pouvez le faire via la méthode suivante :

.example li{float:left;margin-left:10px;}   
.example li:first-child{margin-left:0;}

Cependant, IE6 ne prend pas en charge la méthode :child-first, nous devons donc utiliser l'

expression

pour réaliser qu'IE6 prend également en charge :child-first , le code est le suivant :

.example li{float:left; margin-left:10px; _margin-left:expression(this.previousSibling==null?'0px':'10px');}   
.example li:first-child{margin-left:0;}

Bien sûr, on peut aussi ajouter une

class

au premier li pour redéfinir la marge-gauche, s'il s'agit d'une page statique Ce n'est pas grave. Si le programme doit boucler pour afficher li, il serait préférable d'utiliser l'enfant d'abord. Au moins, il peut sauvegarder le programme. porter un seul jugement.

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!