Strukturelle Pseudoklassen

Ausgezogen aus dem Buch "HTML5 & CSS3 für die reale Welt, 2. Ausgabe", die von Alexis Goldstein, Louis Lazaris und Estelle Weyl mitautorisiert wurde. Dieses Buch ist in Geschäften auf der ganzen Welt erhältlich und Sie können die E-Book-Version hier auch kaufen.

Bisher haben wir gelernt, wie man Elemente basierend auf ihren Attributen und Zuständen lokalisiert. Mit CSS3 können wir auch Elemente positionieren, die ausschließlich darauf basieren, wo sie sich im Tag befinden. Diese Selektoren werden als strukturelle Pseudoklasse eingestuft.

Jetzt mögen diese Selektoren komplex erscheinen, aber sie machen mehr Sinn, wenn wir uns ansehen, wie sie später angewendet werden können. Mit Ausnahme von IE8 und unten unterstützen IE9 und neuere Versionen und alle anderen Browser diese Selektoren:

:root Root -Element in unserer HTML -Datei ist das html -Element.

E:nth-child(n) nte Subelement E. N -Parameter werden in der folgenden Beschreibung erläutert.

E:nth-last-child(n) Nth Child Element F (Countdown aus der letzten). li:nth-last-child(1) entspricht dem letzten Element in einer beliebigen Liste, die gleich wie li:last-child ist (siehe Anweisungen unten).

E:nth-of-type(n) In einem bestimmten übergeordneten Element ist das nte Element vom Typ e. Der Unterschied zwischen nth-child und nth-of-type wird in der folgenden Beschreibung erklärt.

E:nth-last-of-type(n) ist der gleiche wie nth-of-type(n), beginnt jedoch vom letzten Element im übergeordneten Element.

Beschreibung: Parameter des Strukturauswahl

Es gibt vier Pseudoklassen, die Gleichung an b als Parameter in Klammern verwenden oder die Schlüsselwörter odd und even verwenden. Zu den strukturellen Pseudokategorien gehören :nth-child(an b), :nth-last-child(an b), :nth-of-type(an b) und :nth-last-of-type(an b). In der Gleichung an b ist a der Multiplikator als Ganzzahl, B ist der Offset als Ganzzahl, und N ist immer die Variable n.

Im einfachsten Fall können Sie eine Ganzzahl übergeben. Beispielsweise sucht E:nth-of-type(3) das dritte E -Element -Kind eines einzigen übergeordneten Elements. Sie können eines von zwei Schlüsselwörtern odd oder even übergeben, um sich einander zu finden. Sie können auch numerische Ausdrücke effizienter bestehen, wie beispielsweise E:nth-of-type(3n 1). 3n repräsentiert alle drei Elemente, definiert die Frequenz und 1 ist der Versatz. Der Standardversatz ist Null, daher entspricht nth-of-type(3n) mit den Elementen 3., 6. und 9. in der Serie, während nth-of-type(3n 1) mit dem 1., 4., 7. usw. übereinstimmt.

negative Offsets sind ebenfalls zulässig. CSS basiert auf sprachbasiertem, keine Programmiersprachen, daher beginnen die Zählungen bei 1, nicht bei 0. Es können keine Leerzeichen zwischen dem Multiplikator A und der Variablen -n geben, und der Offset muss am Ende platziert werden.

Mit diesen numerischen Pseudoklassen können Sie die Elemente bestimmen, die Sie finden möchten, ohne dem Tag Klassen hinzuzufügen. Das häufigste Beispiel ist eine Tabelle, in der jede andere Reihe etwas dunkler ist, um das Lesen einfacher zu lesen. Früher mussten wir jedem tr ungerade oder sogar Klassen hinzufügen, um dies zu erreichen. Jetzt können wir einfach tr:nth-of-type(odd) deklarieren, um jede seltsame Zeile zu lokalisieren, ohne die Marke zu berühren. Sie können sogar noch mit der dreifarbigen Streifentabelle: Position tr:nth-of-type(3n), tr:nth-of-type(3n 1) und tr:nth-of-type(3n 2) gehen und jeweils eine andere Farbe anwenden.

E:first-child Wenn e das erste Kind seines übergeordneten Elements ist, ist es Element E. Dies ist das gleiche wie E:nth-child(1).

E:last-child Wenn e das letzte Kind seines übergeordneten Elements ist, ist es Element E, das gleiche wie E:nth-last-child(1).

:first-of-type ist das gleiche wie :nth-of-type(1).

E:last-of-type ist das gleiche wie :nth-last-of-type(1).

E:only-child Wenn e das einzige Kind seines übergeordneten Elements ist, ist es Element E.

E:only-of-type Wenn e das einzige E -Element vom Typ im direkten Kind seines übergeordneten Elements ist, dann ist es Element E.

Beschreibung: Unterelemente und Typen

Bei Verwendung der Strukturauswahlern von nth-of-type und nth-child ist es wichtig zu verstehen, was in diesem Fall "Unterelemente" und "Typen" bedeuten. "Sube -Elemente" Zeigen Sie alle untergeordneten Elemente an und überprüfen Sie, ob der Vorgänger übereinstimmt. Geben Sie zuerst alle Elemente ein, die dem Vorgänger entsprechen und dann entsprechend der Anzahl übereinstimmen.

für p:nth-child(3n) betrachtet der Browser jedes dritte untergeordnete Element des übergeordneten Elements. Wenn das Kinderelement P ist, stimmt es überein; Für p:nth-of-type(3n) betrachtet der Browser alle P -Kinder des übergeordneten Elements und entspricht allen drei ps.

strukturelle Pseudoklassen basieren auf übergeordneten Elementen und zählen erneut für jedes neue übergeordnete Element. Sie sehen nur Elemente, die direkte Kinderelemente des übergeordneten Elements sind. Textknoten sind nicht Teil der Gleichung.

E:empty Elemente ohne Kinderelemente;

hello

und

entspricht nicht

, sondern p:empty

und

wird übereinstimmen. Dieser Selektor stimmt auch mit leeren oder ungültigen Elementen überein, z. B.

und.

Elemente in Sprachen, die zwei Buchstabenabkürzungen verwenden (z. B. en). Im Gegensatz zu E:lang(en) (wobei das Attribut E:[lang|=en] als Attribut von Element E existieren muss), wird lang, wenn die Sprache auf dem Element selbst oder auf einem Ancestor deklariert wird, mit E. übereinstimmt. E:lang(en)

Dies ist besonders nützlich: Es wird das Element ausgewählt, das mit dem Selektor in Klammern übereinstimmt. E:not(exception)

Der Selektor mit der :not Pseudo-Klasse übereinstimmt alles links vom Dickdarm und schließt dann Elemente aus dieser Spielgruppe aus, die auch dem Inhalt rechts vom Dickdarm entsprechen. Das linke Match wird bevorzugt. Zum Beispiel wird p:not(.copyright) zuerst alle Absätze im Dokument übereinstimmen und dann alle Absätze ausschließen, die auch Urheberrechtsklassen aus dieser Sammlung haben. Sie können sich mehreren :not Pseudoklassen zusammenschließen. input:not([type=checkbox]):not([type=radio]) stimmt mit allen Eingabelementen auf der Seite überein, mit Ausnahme des Kontrollkästchens oder des Optionsfelds vom Typ Typ.

FAQs auf strukturellen Pseudoklassen

Was sind die verschiedenen Arten von strukturellen Pseudoklassen?

strukturelle Pseudoklassen sind eine Untergruppe von CSS-Pseudoklassen, mit denen Sie Elemente basierend auf ihrer Position im Dokumentbaum auswählen und stylen können. Dazu gehören :root, :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type(), :first-child, :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty,

,

, :nth-child(),

und

. Jede dieser Pseudoklassen verfügt über eine einzigartige Funktion, die genauere Stile von HTML-Elementen ermöglicht. :nth-child() :nth-child(2) :nth-child(odd) Wie funktionieren Pseudoklassen? :nth-child(2n 1)

Pseudoklasse entspricht Elementen, die auf ihrer Position in einer Gruppe von Elementen auf derselben Ebene basieren. Es akzeptiert einen Parameter, der eine Nummer, ein Schlüsselwort oder eine Formel sein kann. Beispielsweise wählt :nth-of-type() das zweite untergeordnete Element seines übergeordneten Elements aus, während :nth-child() oder

alle untergeordneten untergeordneten Elemente ausgewählt.

Was ist der Unterschied zwischen :nth-of-type() :nth-child() und :nth-child()? :nth-of-type() li Während p und :nth-child() beide ausgewählten Elemente basierend auf ihren Positionen ausgewählt, unterscheiden sie sich in der Art und Weise, wie sie diese Positionen berechnen. :nth-of-type() Behandeln Sie alle Elemente als Geschwister unabhängig von ihrem Typ, während li nur Elemente desselben Typs berechnet. Wenn Sie beispielsweise eine Liste von p und

Elementen haben, berechnet

beide Elementarten, während

je nach Ihrem angegebenen Element

oder :first-child Elemente berechnet wird. ul li Wie kann und setzen Sie den Stil des ersten untergeordneten Elements des übergeordneten Elements aus? ul li:first-child { color: red; }

Um den Stil des ersten untergeordneten Elements des übergeordneten Elements auszuwählen und festzulegen, können Sie die Pseudoklasse verwenden. Wenn Sie beispielsweise die Farbe des ersten -Elements in ändern möchten, können Sie die folgenden CSS verwenden: .

:only-child Was ist die Funktion der Pseudoklassen?

:only-child Pseudoklasse entspricht Elementen, die die einzigen untergeordneten Elemente seines übergeordneten Elements sind. Dies ist nützlich, wenn Sie nur Stile auf ein Element anwenden möchten, wenn es kein Geschwisterelement hat. Zum Beispiel möchten Sie möglicherweise nur dann spezielle Stile zu p Elementen hinzufügen, wenn sie die einzigen Kinderelemente von div sind.

wie kann ich :empty Pseudoklasse verwenden?

:empty Pseudoklasse entspricht jedem Element ohne Kinderelemente. Dies umfasst Textknoten, Kommentare oder andere Elemente. Sie können es beispielsweise verwenden, um ein leeres div zu verbergen, ansonsten nimmt der div Platz auf der Seite ein: div:empty { display: none; }.

Kann die strukturelle Pseudoklasse kombiniert werden?

Ja, Sie können strukturelle Pseudoklassen kombinieren, um spezifischere Selektoren zu erstellen. Sie können beispielsweise :nth-of-type() und :last-child kombinieren, um den letzten Typ von li in seinem übergeordneten Element auszuwählen, vorausgesetzt, es ist auch das letzte Kind seines übergeordneten Elements.

Unterstützen alle Browser strukturelle Pseudoklassen?

Die meisten modernen Browser unterstützen strukturelle Pseudoklassen, aber es gibt möglicherweise einige Inkonsistenzen oder mangelnde Unterstützung in älteren Browsern. Bevor Sie bestimmte Pseudoklassen in CSS verwenden, können Sie immer das aktuelle Support-Level auf Websites wie Can I verwenden.

Können strukturelle Pseudoklassen mit Pseudoelementen verwendet werden?

Ja, strukturelle Pseudoklassen können in Verbindung mit Pseudoelementen verwendet werden. Sie können beispielsweise das ::before Pseudo-Element mit der :first-child Pseudo-Klasse verwenden, um Inhalte vor dem ersten Kind des übergeordneten Elements hinzuzufügen.

Wie erstelle ich dynamische Stile mit strukturellen Pseudoklassen?

strukturelle Pseudoklassen können verwendet werden, um dynamische Stile zu erstellen, die auf HTML-Strukturen reagieren. Sie können beispielsweise die :nth-child() Pseudo-Klasse mit Formeln verwenden, um eine Zebra-Drucktabelle zu erstellen, oder die Pseudo-Klasse :hover, um die Farbe des Links zu ändern, wenn Sie schweben. Die Möglichkeiten sind unendlich und nur durch Ihre Kreativität eingeschränkt.

Das obige ist der detaillierte Inhalt vonStrukturelle Pseudoklassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!