Was ist der Unterschied zwischen CSS First-Child und N-Th-Child?

Der Unterschied zwischen CSS First-Child und Nth-Child: 1. First-Child ist ein Pseudoklassenselektor, was bedeutet, dass das erste untergeordnete Element mit dem übergeordneten Element übereinstimmt. 2. Nth-Child bedeutet, mit dem n-ten untergeordneten Element abzugleichen das übergeordnete Element.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3-Version, Dell G3-Computer.

Empfohlen: „css-Video-Tutorial“

first-child

E: first-child ist ein Pseudoklassenselektor,

entspricht dem ersten untergeordneten Element E des übergeordneten Elements

Wie zu sehen ist Aus der Beschreibung geht hervor, dass E das erste untergeordnete Element ist, das Sie auswählen möchten, nicht das übergeordnete Element. Zuerst dachte ich fälschlicherweise, dass E:first-child das erste untergeordnete Element von E sei.

:nth-child(n)

stimmt mit dem n-ten untergeordneten Element E

E des übergeordneten Elements überein, das auch ein untergeordnetes Element ist, und kann nur mit dem n-ten untergeordneten Element unter dem übergeordneten Element übereinstimmen. n beginnt mit dem Zählen ab 1

<ul>
  <li>l1</li>
  <li>l2</li>
  <li>l3</li>
</ul>

Zur Auswahl von 25edfb22a4f469ecb59f1190150159c6l1bed06894275b65c1ab86501b08a632eb Wenn Sie zu diesem Zeitpunkt das erste p-Element auswählen und p:first-child anwenden, tritt ein Fehler auf, da das übergeordnete Element von p div ist und das erste untergeordnete Element von div nicht p, sondern h1 ist Wenn der Selektor p:first-child ist, wird es schief gehen.

Ebenso ist E:last-child``E:only-child das gleiche wie oben. Das E-Element muss das letzte untergeordnete Element oder das einzige untergeordnete Element seines übergeordneten Elements sein.

Für weitere Programmierkenntnisse wenden Sie sich bitte an uns Besuchen Sie:

Programmier-Tutorial

! !

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen CSS First-Child und N-Th-Child?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!