Wie unterscheiden sich „nth-child'- und „nth-of-type'-Selektoren bei der Auswahl bestimmter HTML-Elemente?

Auswählen bestimmter Elemente mit nth-child oder nth-of-type

In HTML gibt es Situationen, in denen Sie ein bestimmtes Element innerhalb einer Liste basierend auf auswählen müssen seinen Klassennamen, unabhängig von seiner Position im Markup. Um dies zu erreichen, stellt CSS zwei wesentliche Selektoren bereit: nth-child und nth-of-type.

Mit nth-child

nth-child können Sie ein Element basierend auf seiner relativen Position auswählen zu seinen Geschwistern. Beispielsweise würde div.myclass:nth-child(1) das erste Element mit der Klasse myclass in seinem übergeordneten Container auswählen.

Beispiel:

<code class="html"><div class="parent_class">
    <div class="myclass">my text1</div>
    <!-- omitted code -->
    <div class="myclass">my text2</div>
    <!-- omitted code -->
    <div class="myclass">my text3</div>
    <!-- omitted code -->
</div></code>

<code class="css">.parent_class:nth-child(1) { /* first .myclass within .parent_class */ }
.parent_class:nth-child(2) { /* second .myclass within .parent_class */ }
.parent_class:nth-child(3) { /* third .myclass within .parent_class */ }</code>

Nth-of-type verwenden

nth-of-type ähnelt nth-child, wählt jedoch aus ein Element basierend auf seiner Position relativ zu anderen Elementen mit demselben Tag-Namen. In diesem Fall würde div.myclass:nth-of-type(1) das erste Element mit der Klasse myclass in seinem übergeordneten Container auswählen, unabhängig von dazwischen liegenden Elementen mit unterschiedlichen Tags.

Beispiel:

Verwendung des gleichen HTML-Codes wie zuvor:

<code class="css">.myclass:nth-of-type(1) { /* first .myclass, regardless of its container */ }
.myclass:nth-of-type(2) { /* second .myclass, regardless of its container */ }
.myclass:nth-of-type(3) { /* third .myclass, regardless of its container */ }</code>

Durch die Verwendung dieser Selektoren können Sie eine genaue Ausrichtung erzielen spezifische Elemente mit einem bestimmten Klassennamen, was komplexe und dynamische Seitenlayouts basierend auf ihrer Position innerhalb der Dokumentstruktur ermöglicht.

Das obige ist der detaillierte Inhalt vonWie unterscheiden sich „nth-child'- und „nth-of-type'-Selektoren bei der Auswahl bestimmter HTML-Elemente?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!