Mehrere häufig verwendete Selektoren in CSS3

Nach der Geburt von HTML in den frühen 1990er Jahren wurde CSS Ende 1996 geboren. CSS wurde speziell entwickelt, um die grundlegenden Attribute von Webseiten zu definieren. Was sind also die häufig verwendeten Selektoren in CSS3? Lassen Sie mich es Ihnen heute vorstellen.

Die Geburt von HTML in den frühen 1990er Jahren

Ende 1996 wurde die erste Version von CSS geboren

Im Mai 1998 wurde CSS2 offiziell veröffentlicht

2004 CSS2 .1 Release

Veröffentlichung von CSS3 2002 2003 2004 2005 2007 2009 2010

Modulare Entwicklung

CSS1 definiert die Grundattribute der Webseite:

Schriftart, Farbe, Basisselektor usw.

CSS2 fügt erweiterte Funktionen basierend auf CSS1 hinzu

Schweben und Positionieren, erweiterte Selektoren usw. (Unterselektor, relativer Nachbarselektor, Universalselektor)

CSS3 folgt einer modularen Entwicklung. Der Release-Zeitpunkt ist kein Zeitpunkt, sondern ein Zeitraum.

Universeller Selektor: * Alle Elemente auswählen

Untergeordnete Elemente auswählen:> Direkte Nachkommen von Elementen auswählen

Benachbarte Geschwisterselektoren: + Wählt das erste aus Element unmittelbar nach dem Zielelement

Gewöhnlicher Geschwisterselektor: ~ Wählt alle direkt darauf folgenden Geschwisterelemente aus

:nth-child Wählt den angegebenen Index aus. Das untergeordnete Element

bei nth- child(n) Das n-te untergeordnete Element

unter dem übergeordneten Element. Gerades untergeordnetes Element

:nth-last-child(n) Das n-te untergeordnete Element von unten

:nth-of-type(n) Das n-te untergeordnete Element des angegebenen Typs unter dem übergeordneten Element Element

:nth-last-of-type Das n-te untergeordnete Element des angegebenen Typs unter dem übergeordneten Element

:first-child wählt das erste untergeordnete Element unter dem übergeordneten Element aus.

:last-child wählt das letzte untergeordnete Element unter dem übergeordneten Element aus.

:only-child wählt das einzige untergeordnete Element aus unter dem übergeordneten Element

:only-of-type wählt das übergeordnete Element aus. Das einzige Unterelement des angegebenen Typs unter

:root wählt das Stammverzeichnis des Dokuments aus und gibt den HTML-Code zurück

E[attr] Attributname, nicht sicher über den spezifischen Attributwert

E[attr ="value"] gibt den Attributnamen und den entsprechenden Attributwert an

E[attr ~="value"] gibt den Attributnamen an, der mehrere durch Leerzeichen getrennte Attributwerte enthält und     value

E[attr ^= "value"] gibt den Attributnamen an Der Attributwert beginnt mit dem Wert

E[attr $="value"] gibt den Attributnamen an und der Attributwert endet mit dem Wert

E[attr *="value"] gibt das Attribut an Name, und der Attributwert enthält Wert

E[attr |= "value"] gibt den Attributnamen an, und der Attributwert beginnt mit value-

UI Pseudo

Class Selector

: :enabled Wählen Sie das aktivierte Statuselement aus

:disabled Wählen Sie das deaktivierte Statuselement aus

:checked Wählen Sie das ausgewählte aus Eingabeelemente (Optionsfelder oder Kontrollkästchen)

: Standard. Wählen Sie das Standardelement aus.

: gültig, ungültig. Wählen Sie gültige oder ungültige Eingabeelemente basierend auf der Eingabevalidierung aus.

: Wählen Sie Elemente im Bereich und außerhalb des Bereichs aus innerhalb oder außerhalb des angegebenen Bereichs

:repuired, optional wählt Eingabeelemente basierend darauf aus, ob das erforderliche Attribut zulässig ist oder nicht

dynamisch Pseudoklassenselektor

: :link wählt das Linkelement aus

:visited wählt das Element aus, auf das der Benutzer zugreifen kann

:hover wählt das Element aus, über das sich die Maus bewegt

:ative Das Ereignis wird ausgelöst, wenn mit der Maus geklickt wird

:focus Das Element, das derzeit fokussiert ist

Andere Pseudoklassenselektoren:

:not(< selector >) Negiert die Auswahl des in Klammern gesetzten Selektors

:lang() Element basierend auf lang

globalem Attribut

:target url fragment Das Element, auf das der Bezeichner

:empty wählt das Element mit leerem Inhalt aus

:selection Der Mauszeiger wählt den Elementinhalt aus

Das war's für CSS3-Selektoren, spannender. Bitte beachten Sie andere verwandte Artikel zu PHP Chinesische Website!

Verwandte Lektüre:

Welche neuen Hintergrundattribute gibt es in CSS3

Verwendung CSS3-Medienanfragen

So erstellen Sie eine flexible Box in CSS3

Das obige ist der detaillierte Inhalt vonMehrere häufig verwendete Selektoren in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!