Praktischer Code für den CSS3-First-Child-Selektor

Dieser Artikel stellt hauptsächlich die praktische Strategie des CSS3-First-Child-Selektors vor, einschließlich des Unterschieds zwischen First-Child und :first-of-child sowie der IE-Kompatibilitätsprobleme Zur Erklärung können Freunde, die es benötigen, auf den Selektor

:first-child

in CSS zurückgreifen, um die erste Gruppe von Objekten (gleiches übergeordnetes Element) eines bestimmten Elements
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;   
}

Der Unterschied zwischen first-child und :first-of -child
Angenommen, wir haben einen HTML-Code wie diesen:

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

CSS-Selektor:Wir Wenn Sie das Element finden möchten, verwenden Sie die folgende
-Definitionsmethode p:first-child. Das p-Element wird abgeglichen, da das p-Element das erste untergeordnete Element von p ist >h1:first-child kann mit keinem Element übereinstimmen, da h1 hier das zweite untergeordnete Element von p ist, nicht das erste. span:first-child kann mit keinem Element übereinstimmen, da hier keines der span-Elemente von p ist. Das erste untergeordnete Element element;
:first-child entspricht dem p-Element, da das erste untergeordnete Element von p hier p ist.
Zwei der oben
angewendeten
Stile können nicht abgeglichen werden, aber keine Panik, CSS definiert auch: First-of-Child
Pseudoklasse , bitte schauen Sie sich das an Verwendung und Erklärung: p:first-of-type entspricht dem p-Element, da p das erste untergeordnete Element von p ist. Tatsächlich gibt es nur ein untergeordnetes Element von p; >h1:first-of-type entspricht dem h1-Element, da h1 das erste aller untergeordneten Elemente von p ist, das heißt h1. Tatsächlich gibt es hier nur ein h1-untergeordnetes Element -type entspricht dem dritten untergeordneten Element span. Hier hat p zwei untergeordnete Elemente, die Spannen sind, und das erste wird abgeglichen.
:first-of-type entspricht dem p-Element Zusammenfassung
:
:first-child entspricht dem ersten untergeordneten Element eines übergeordneten Elements, das als Struktur bezeichnet werden kann erstes untergeordnetes Element an.
:first-of-type entspricht dem ersten des Typs. Auf was bezieht sich der Typ vor dem Doppelpunkt? Elemente eins. Es gibt hier keine Begrenzung für das erste untergeordnete Element, solange es sich um das erste Element dieses Typs handelt. Natürlich gehört der Umfang dieser Elemente alle zur gleichen Ebene, also zu Peers.
Derselbe Typ von Selektoren :last-child und :last-of-type, :nth-child(n) und :nth-of-type(n) kann auch auf diese Weise verstanden werden .


Kompatibilitätsprobleme mit IE

Schauen Sie sich zunächst den folgenden Codeabschnitt an, den HTML-Teil:

CSS-Teil:

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

Wenn Sie den linken Rand des ersten Li auf 0px setzen müssen, können Sie dies mit der folgenden Methode tun:

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

Allerdings unterstützt IE6 die :child-first-Methode nicht, daher müssen wir den

Ausdruck

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

verwenden, um zu erkennen, dass IE6 auch:child-first unterstützt , der Code lautet wie folgt:

Natürlich können wir auch eine

Klasse

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

zum ersten Li hinzufügen, um margin-left neu zu definieren, Wenn es sich um eine

statische

Seite handelt, ist dies in Ordnung. Wenn das Programm eine

Schleife ausführen muss, um li auszugeben, ist es besser, das Programm zuerst zu verwenden ein Urteil fällen.

Das obige ist der detaillierte Inhalt vonPraktischer Code für den CSS3-First-Child-Selektor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!