Wie Verwenden von New CSS3 Selectors

CSS3 unterstützt mehrere neue Selektoren mit interessanten neuen Funktionen, die Sie kennen werden sollte. Sie können diese neuen Funktionen nutzen Seiten als bisher in noch bessere Möglichkeiten zu verbessern.

Attributauswahl

Sie können nun einen Stil auf ein beliebiges Element mit einem bestimmten Attributwert anzuwenden. Beispielsweise die Eingang Tag nimmt verschiedene Formen an, die alle durch die bestimmt Art Attribut. Wenn Sie sich bewerben einen einzigen Stil der Eingang Element, wird dieser Stil auf viele verschiedene Arten von Elementen angewandt: Kontrollkästchen, Textfelder und Optionsfelder. Durch die Verwendung des neuen Attribut Syntax können Sie einen Stil zu jedem Eingabeelement gelten:

 input [type = "text"] {background-color: # CCCCFF-}

Sie können den Stil mit oder ohne Tag-Typ anwenden, aber es ist möglich, unerwartete Nebenwirkungen haben, wenn Sie einen extrem gemeinsames Attribut wählen.

bild0.jpg

nicht

Es gibt Zeiten, die Sie eine inverse Auswahl möchten. Zum Beispiel, stellen Sie sich einen Stil auf alle Absätze anwenden wollte, die nicht Mitglieder der sind besondere Klasse:

 p: nicht (.Special) {border: 1px solid rot-}

n-te-Kind

Das n-te-Kind Wähler können Sie ein oder mehrere Elemente in einer Gruppe zu wählen. Die Basisversion verwendet eine numerische Eingabe:

 #myList> li: n-te-Kind (1) {border: 1px solid blau-}

Auf diese Weise können Sie einen Stil auf die erste von einer Gruppe von Elementen anwenden. In dem Beispiel gibt es eine Liste mit vier Einzelteile. Der Stil wird auf die Listenelemente angewendet wird, nicht die Liste.

Der numerische Wert kann tatsächlich eine Formel sein, wie ein + b. Wenn Sie Algebra lieben (und wer nicht), können Sie alle geradzahligen Elemente wie folgt aus:

 #myList> li: n-te-Kind (2n) {border: 1px solid blau-}

Eine ähnliche Formel kann verwendet werden, um die ungeraden Kinder zu holen.

 #myList> li: n-te-Kind (2n + 1) {border: 1px solid blau-}

Sie können diese Formel System verwenden, um alle Arten von Gruppierungen zu bekommen, aber die meisten Leute brauchen einfach ein bestimmtes Element oder alle geraden oder ungeraden Zeilen. CSS3 liefert Verknüpfung Schlüsselwörter, sogar und ungerade, so müssen Sie es nicht tun Mathe mit:

 #myList> li: n-te-Kind (auch) {color: white-background-color: rot-}

Das Schlüsselwort können Sie das letzte Element aus einer Gruppe zu holen. Es gibt ein paar weitere Variationen dieser Selektionstechnik:

  • : N-te-last-Kind (N): Funktioniert wie n-te-Kind, außer zählt von dem Ende der Gruppe von Elementen anstatt am Anfang.

  • :nth-of-Typs (N): Dieser Selektor funktioniert genauso wie n-te-Kind , außer es filtert auf eine bestimmte Art und alle Elemente ignoriert, die nicht genau die gleiche Art von Element sind.

  • letztes Kind: Das (natürlich genug) wählt das letzte Kind-Element.

  • Last-n-te-of-Typ (N): funktioniert wie nth-of-type, aber am Ende der Gruppe.

  • erstes Kind: Grabs das erste Element (technisch war dies in CSS2 zur Verfügung, aber es wurde nur selten verwendet).

Diese Auswahlwerkzeuge werden vollständig unterstützt in allen aktuellen Browsern. Jedoch, wie sie in der Regel nur verwendet werden, die Lesbarkeit zu verbessern, sollte es sicher sein, sie zu benutzen. Ältere Browser überspringen einfach den Stil.

image1.jpg

Weitere neue Pseudo-Klassen

Pseudo-Klassen können Sie Stile angeben basierend auf dem Zustand eines Elements. Moderne CSS unterstützt eine Reihe von neuen Pseudo-Klassen:

  • :schweben: Das :schweben Pseudo-Klasse ein Teil von CSS von Anfang an war, aber es war offiziell nur für den Tag festgelegt. Jetzt die :schweben Pseudo-Klasse kann auf jedes Element angewendet werden. Wenn die Maus über ein Element ist, hat dieses Element den aktivierten Zustand. Beachten Sie, dass mobile Geräte nicht immer unterstützen, weil die Position des Zeigegeräts nicht bekannt ist, bis das Element aktiviert wird.

  • :Fokus: Das :Fokus Pseudoklasse aktiviert wird, wenn ein Element bereit, Tastatureingabe zu empfangen.

  • :aktiv: Ein Formelement ist aktiv, wenn es derzeit verwendet wird: zum Beispiel, wenn ein Knopf, aber noch nicht freigegeben wurde gedrückt. Mobile Geräte überspringen oft direkt in den aktiven Modus, ohne durch schweben Modus. Dies kann ein wichtiges Gestaltungsüberlegung sein, wenn Staat für Styling verwenden.

Die staatlichen Pseudo-Klassen werden von allen modernen Browsern mit Ausnahme der IE-Familie von Browsern voll unterstützt. Es ist begrenzt, aber Buggy Unterstützung in noch früheren Versionen von Internet Explorer.

Ähnliche

Menü