Fassen Sie die häufig verwendeten n-ten-Kind-Selektoren zusammen

Vorwort

In der Front-End-Programmierung verwenden wir häufig den n-ten-Kind-Selektor, der sowohl numerische als auch ungerade, gerade usw. Werte akzeptieren kann. Als ich heute das Buch „Mastering CSS“ las, fiel mir ein, dass er auch Ausdrücke wie 4n+1, -2n+1 usw. akzeptieren kann. Was sind also ihre spezifischen Verwendungszwecke? Welche Szenarien sind anwendbar? Vielleicht ist Ihnen das noch nicht ganz klar. Schauen wir uns die folgenden Beispiele genauer an. Ihre HTML-Struktur ist wie folgt:

<Text>
    <a>1</a>
    <a>2</a>
    <a>3</a>
    <a>4</a>
    <a>5</a>
    <a>6</a>
</body>

n-tes Kind (gerade) und n-tes Kind (ungerade)

Dies ist eine sehr häufig verwendete Variable, die jeweils gerade und ungerade Zahlen darstellt.

<style type="text/css">
    a:nth-child(even){/*Gerade Schriftarten sind rot*/
        Farbe: rot;
    }
    a:nth-child(odd){/*Ungerade Schriftgröße ist 30px*/
        Schriftgröße: 30px;
    }
</Stil>

Auch bei der Überprüfung des Browsers stellte sich heraus, dass es tatsächlich unseren Erwartungen entsprach:

n-tes-Kind(1)

Wählen Sie ein einzelnes Element aus. Das Element wird gemäß dem angegebenen Wert abgeglichen (beginnend mit 1, was am häufigsten vorkommen sollte), und zwar wie folgt:

<style type="text/css">
    a:nth-child(3){/*Wählen Sie die Daten des dritten Elements zur Verarbeitung aus*/
        Farbe: rot;
        Schriftgröße: 30px;
    }
</Stil>

Das Ergebnis ist wie erwartet:

n-tes Kind (2n + 1)

Diese Ausdrucksform wird selten verwendet. Wie soll damit umgegangen werden? Tatsächlich ist es auch sehr einfach. Zählen Sie einfach n von 0 an, berechnen Sie den Wert des gesamten Ausdrucks, gleichen Sie das Dokument ab und stoppen Sie, wenn es keine erfolgreiche Übereinstimmung gibt. Wie stimmt beispielsweise nth-child(2n+1) mit dem aktuellen Dokument überein? Wenn n=0, 2n+1=1, stimmt es weiterhin überein, wenn es existiert. n=1, 2n+1=3, es existiert auch. n=2, 2n+1=5, es existiert immer noch. n=3, 2n+1=7, es kann nicht mehr erfolgreich abgeglichen werden, daher sollten die Elemente, die funktionieren, die Zeilen 1, 3 und 5 sein. Sehen wir uns an, ob die Browserergebnisse unseren Erwartungen entsprechen:

Sicherlich gibt es nur 1, 3, 5

Was ist, wenn es -n ist, zum Beispiel -n+2? Es ist tatsächlich ähnlich. Wenn n=0, -n+2=2, gibt es eine fortgesetzte Übereinstimmung. Wenn n=1, -n+2=1 immer noch existiert. Wenn n=0, -n+2=0 nicht existiert, endet die Übereinstimmung. Daher sollten die Elemente, die funktionieren, die Zeilen 1 und 2 sein. Sehen Sie sich die Ergebnisse an:

Wir können dies also verwenden, um die ersten paar Elemente abzugleichen. Natürlich sind die Elemente, die abgeglichen werden können, je nach dem von Ihnen entworfenen Ausdruck unterschiedlich.

Erweiterungen, die oft mit den obigen verwechselt werden: nth-of-type

:nth-of-type hat ähnliche Werte wie die oben genannten, also was ist der Unterschied? Wenn die Seitenelemente komplizierter werden, können Sie das erkennen. Ändern Sie die HTML-Struktur wie folgt:

<Text>
    <a>a1</a>
    <p>p1</p>
    <a>a2</a>
    <p>p2</p>
    <a>a3</a>
    <p>p3</p>
    <a>a4</a>
    <p>S4</p>
</body>

Sie können sehen, dass hier ein zusätzliches p-Tag vorhanden ist. Was passiert also, wenn wir den folgenden CSS-Stil hinzufügen?

<style type="text/css">
    ein:n-tes-Kind(2){
        Farbe: rot;
        Schriftgröße: 30px;
    }
</Stil>

Ich glaube, viele Leute würden sagen, dass a2 rot wird und größer wird, aber ist das wirklich so? Schauen Sie sich die Ergebnisse an:

Das Ergebnis ist keine Veränderung, warum? Denn a:nth-child(2) bezieht sich sowohl auf das a-Tag als auch auf das zweite Kindelement im übergeordneten Element. In unserer Struktur sollte das zweite Kindelement im übergeordneten Element das Tag sein, das p1 entspricht. Wie können wir also A2 rot und größer machen? Hier müssen wir das verwirrende a:nth-of-type(2) einführen, da es sich sowohl auf das a-Tag als auch auf das zweite Kindelement des Elternelements unter allen a-Elementen bezieht. Ist das nicht genau das, was ich will? Mal sehen, ob das Ergebnis unseren Wünschen entspricht.

<style type="text/css">
    a:n-ter-Typ(2){
        Farbe: rot;
        Schriftgröße: 30px;
    }
</Stil>

Das ist unsere Meinung.

Zusammenfassung

Zunächst fassen wir die verschiedenen Werte von nth-child zusammen. Beachten Sie, dass einzelne Werte bei 1 beginnen. Handelt es sich um einen numerischen Ausdruck, beginnt n bei 0 zu zählen.

Einführung des verwirrenden nth-of-type, nth-of-type bezieht sich auf die Reihenfolge im aktuell angegebenen Typ der Elemente, während nth-child die Reihenfolge unter allen Elementen ist

Damit ist dieser Artikel zur Zusammenfassung der häufig verwendeten n-ten-Kind-Selektoren abgeschlossen. Weitere Informationen zum n-ten-Kind-Selektor finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!