Heim > Web-Frontend > Front-End-Fragen und Antworten > Was ist der Unterschied zwischen CSS First-Child und N-Th-Child?

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

藏色散人
Freigeben: 2021-01-08 14:39:41
Original
2933 Leute haben es durchsucht

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.

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

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>
Nach dem Login kopieren

Zur Auswahl von

  • l1
  • 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!

    Verwandte Etiketten:
    css
    Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage