Wie verwenden Sie die: n-Child () und: n-te-vom-Typ () Pseudoklasse?

Wie benutzt man die: n-Child () und: nth-of-Type () Pseudoklasse?

Die :nth-child() und :nth-of-type() Pseudoklassen in CSS werden verwendet, um Elemente basierend auf ihrer Position in einem übergeordneten Container auszuwählen. Hier ist ein detaillierter Blick auf die Verwendung von jeweils:

Verwenden Sie: N-Child ()

Die Pseudoklasse :nth-child() wählt Elemente aus, basierend auf ihrer Position unter allen Geschwistern innerhalb desselben Elternteils, unabhängig von ihrem Typ. Die Syntax ist:

 <code class="css">:nth-child(an b)</code>

Wobei a und b Ganzzahlen sind und n ein Zähler ab 0 ist. Zu den gemeinsamen Mustern gehören:

<li> :nth-child(2) : Wählt das zweite untergeordnete Element aus. <li> :nth-child(odd) : Wählt alle ungeraden Kinderelemente aus. <li> :nth-child(even) : Wählt alle gleichnötigen Kinderelemente aus. <li> :nth-child(3n) : Wählt jedes dritte Element des untergeordneten Kindes (3, 6, 9 usw.) aus. <li> :nth-child(3n 1) : Wählt jedes dritte Element des untergeordneten Kindes ab dem ersten (1, 4, 7 usw.) aus.

Beispiel Verwendung:

 <code class="html"><ul> <li>First item</li> <li>Second item</li> <li>Third item</li> <li>Fourth item</li> </ul></code>

 <code class="css">li:nth-child(2) { background-color: yellow; }</code>

Dies würde einen gelben Hintergrund auf das zweite <li> Element anwenden.

Verwenden Sie: N-ten-vom-Typ ()

Die Pseudoklasse-Klasse :nth-of-type() ist ähnlich, wählt jedoch nur Elemente basierend auf ihrer Position unter Geschwistern desselben Typs aus. Die Syntax ist identisch mit :nth-child() :

 <code class="css">:nth-of-type(an b)</code>

Beispiel Verwendung:

 <code class="html"><ul> <li>First item</li> <p>Some text</p> <li>Second item</li> <p>More text</p> </ul></code>

 <code class="css">li:nth-of-type(2) { background-color: yellow; }</code>

Dies würde einen gelben Hintergrund auf das zweite <li> -Element anwenden, aber die <p></p> Elemente nicht beeinflussen.

Was sind die wichtigsten Unterschiede zwischen: n-Child () und: n-des-typen () in CSS?

Die wichtigsten Unterschiede zwischen :nth-child() und :nth-of-type() sind:

<li>

Überlegung von Elementtyp:

<li> :nth-child() zählt alle Kinderelemente unabhängig von ihrem Typ. Es berücksichtigt die Position des Elements unter allen Geschwistern. <li> :nth-of-type() zählt nur Geschwister desselben Elementtyps. Es ist spezifischer in seiner Auswahl.
<li>

Selektorpräzision:

<li> :nth-child() ist weniger präzise, ​​wenn Sie auf einen bestimmten Elementtyp abzielen, da es alle Elemente zählt. <li> :nth-of-type() ermöglicht es Ihnen, Elemente genauer auf Typen zu zielen, was in bestimmten Szenarien effizienter sein kann.
<li>

Nutzungsszenarien:

<li> Verwendung :nth-child() , wenn Sie Elemente basierend auf ihrer Position unter allen Geschwistern auswählen müssen, unabhängig vom Typ. <li> Verwendung :nth-of-type() Wenn Sie Elemente basierend auf ihrer Position unter Geschwistern desselben Typs auswählen möchten.

Können Sie Beispiele für die Verwendung angeben, wann Sie verwendet werden sollen: n-Child () versus: n-of-type () in der Webentwicklung?

Verwenden Sie: nth-child () Beispiel:

Angenommen, Sie haben ein Gitterlayout verschiedener Elementarten und möchten jeden dritten Punkt unabhängig vom Elementtyp stylen:

 <code class="html"><div class="grid"> <div>Item 1</div> <p>Item 2</p> <span>Item 3</span> <div>Item 4</div> <p>Item 5</p> <span>Item 6</span> </div></code>

 <code class="css">.grid :nth-child(3n) { background-color: lightblue; }</code>

In diesem Fall stymt :nth-child(3n) jeden dritten Punkt (Punkt 3 und Punkt 6) unabhängig von ihrem Elementtyp.

Verwenden Sie: nth-of-Type () Beispiel:

Wenn Sie jedes Sekunde <div> Element im selben Netzlayout stylen möchten:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code class=&quot;html&quot;&gt;&lt;div class=&quot;grid&quot;&gt; &lt;div&gt;Item 1&lt;/div&gt; &lt;p&gt;Item 2&lt;/p&gt; &lt;span&gt;Item 3&lt;/span&gt; &lt;div&gt;Item 4&lt;/div&gt; &lt;p&gt;Item 5&lt;/p&gt; &lt;span&gt;Item 6&lt;/span&gt; &lt;div&gt;Item 7&lt;/div&gt; &lt;/div&gt;&lt;/code&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code class=&quot;css&quot;&gt;.grid div:nth-of-type(2n) { background-color: lightgreen; }&lt;/code&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p> In diesem Beispiel wird <code>:nth-of-type(2n) jedes Sekunde <div> Element (Artikel 4 und Element 7) stylen.<h3> Wie kann ich meine CSS-Selektoren mit: n-Child () und: n-ten-vom-Typ () optimieren, um eine bessere Leistung zu erzielen?</h3> <p> Um die CSS-Selektoren zu optimieren <code>:nth-child() verwenden :nth-of-type() die folgenden Strategien:

<li>

Spezifität und Auswahleffizienz:

<li> Verwenden Sie :nth-of-type() anstelle von :nth-child() wenn Sie ausdrücklich Elemente eines bestimmten Typs abzielen müssen. Dies kann effizienter sein, da der Browser keine nicht verwandten Elemente verarbeiten muss. <li> Halten Sie Ihre Selektoren so spezifisch, aber so allgemein wie möglich, um den Übergang der Übereinstimmung zu verringern.
<li>

Minimieren Sie DOM -Traversal:

<li>

Kombinieren :nth-child() oder :nth-of-type() mit Klassenauswahlern können dazu beitragen, den erforderlichen DOM-Traversal zu verringern. Zum Beispiel:

 <code class="css">.list-item:nth-child(2) { /* Style properties */ }</code>

Dies zielt auf das zweite Kind mit der Klasse .list-item , die effizienter sein kann als alle Kinder zu durchsuchen.

<li>

Vermeiden Sie tiefe Verschachtelung:

<li>

Tief verschachtelte Selektoren können die Leistung verlangsamen. Verwenden Sie :nth-child() oder :nth-of-type() können dazu beitragen, dass übermäßig bestimmte Selektoren erforderlich sind. Zum Beispiel:

 <code class="css">ul li:nth-child(2) { /* Instead of */ /* ul > li > ul > li:nth-child(2) */</code>

<li>

Grenzwählerkomplexität begrenzen:

<li> Halten Sie die Selektoren einfach und vermeiden Sie es, zu viele Pseudoklassen zu kombinieren. Beispielsweise dient ein einzelner :nth-child(2) wahrscheinlich besser als eine komplexe Kombination aus Pseudoklassen und Attributauswahl.
<li>

Verwenden Sie CSS -Präprozessoren:

<li> CSS -Präprozessoren wie Sass oder weniger können Ihnen helfen, wartbarere und effizientere CSS zu schreiben. Sie können Ihnen helfen, komplexe Selektoren zu verwalten und Wiederholungen zu vermeiden, was indirekt zu einer besseren Leistung führt.

Durch die Implementierung dieser Strategien können Sie sicherstellen, dass Ihre Verwendung von :nth-child() und :nth-of-type() für die Leistung optimiert ist.