Zusammenfassung der neuesten 30 häufig verwendeten Selektoren in CSS3 (geeignet für Anfänger)

*: Universeller Elementselektor

* { margin: 0; padding: 0;

* Der Selektor wählt alle Elemente auf der Seite aus. Die Funktion des obigen Codes besteht darin, den Rand und den Abstand aller Elemente auf 0 zu setzen. Die einfachste Methode besteht darin, den Standard-CSS-Stil

*-Selektoren können auch auf Unterselektoren angewendet werden, wie zum Beispiel der folgende Code:

#container * { border: 1px solid black;

Auf diese Weise werden alle untergeordneten Tag-Elemente mit dem ID-Container ausgewählt und der Rahmen festgelegt.

2

#ID: ID-Auswahl

#container { width: 960px; margin: auto; Der ID-Selektor ist der effizienteste Selektor in CSS. Bei seiner Verwendung muss die Eindeutigkeit der ID gewährleistet sein.

3

.class: Klassenauswahl

.error { color: red;🎜>

Klassenselektoren sind weniger effizient als ID-Selektoren. Eine Seite kann mehrere Klassen haben und Klassen können in verschiedenen Tags verwendet werden.

4

X Y: Tag-Kombinationsauswahl

li a { text-decoration: none }

Der Tag-Kombinationsselektor ist ebenfalls ein häufig verwendeter Selektor.

5

X: Tag-Selektor

a { color: red } ul { margin-left: 0;

Wenn Sie nur den Stil eines bestimmten Tags auf der Seite ändern möchten, können Sie die Tag-Auswahl verwenden.

6

X:visited und X:link

a:link { Farbe: Rot } a:visted { Farbe: Lila }

Pseudoklassenselektor, am häufigsten wird das A-Tag

verwendet

7

X + Y：毗邻元素选择器

 

ul + p { color: red; }

毗邻元素选择器，匹配的是所有紧随X元素之后的同级元素Y

 

8

 

X > Y：子元素选择器

 

div#container > ul { border: 1px solid black; }

匹配#container下的所有子元素。

关于X>Y和X Y的区别请看下面的html实例：

 

Der Selektor #container > ul stimmt nur mit dem ersten UL überein, das das untergeordnete Element UL von #container ist, nicht mit dem ul in li, aber div ul kann mit dem ul in allen DIVs übereinstimmen.

9

X ~ Y:

ul ~ p { Farbe: rot;

Entspricht jedem gleichgeordneten P-Element nach dem X-Element. Das heißt, alle Elemente derselben Ebene nach UL werden ausgewählt.

10

X[title]: Attributselektor

a[title] { color: green }

gleicht Tags mit einem bestimmten Attribut ab. Im Beispiel wird beispielsweise ein Tag mit dem Titelattribut abgeglichen.

11

X[href="foo"]

a[href="http://js8.in"] { color: #1f6053; /* nettuts green */ }

ist auch ein Attributselektor, der Tags mit einem bestimmten Wert im Attribut abgleicht. Beispielsweise wird das a-Tag, das im Beispiel mit href="http://js8.in" übereinstimmt, nicht ausgewählt, die a-Tags anderer Links werden jedoch nicht ausgewählt.

12

X[href*="nettuts"]

a[href*="tuts"] { color: #1f6053; /* nettuts green */ }

gehört zum Attributselektor und stimmt mit allen Tags überein, die tuts in href enthalten. Regelmäßige Übereinstimmung

13

X[href^="http"]

a[href^="http"] {background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;

ähnelt dem Sternzeichen-Auswahl-Tag oben, stimmt aber mit A-Tags überein, die mit http beginnen, und entspricht regelmäßig

14

X[href$=".jpg"]

a[href$=".jpg"] { color: red;

Entspricht Tags, die in Attributen mit .jpg enden, regulärer Abgleich und ist auch eine Art Attributselektor

15

X[data-*="foo"]

Wenn Sie alle Bildlinks abgleichen möchten, können Sie dies mit dem folgenden CSS tun:

a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"] { Farbe: rot; }

Aber wenn wir dem a-Tag ein Datendateityp-Attribut hinzufügen, können wir das folgende CSS verwenden, um schnell das Tag auszuwählen, mit dem wir übereinstimmen müssen.

Bildlink ;a[data-filetype="image"] { color: red;

16

X[foo~="bar"]

a[data-info~="external"] { color: red } a[data-info~="image"] { border: 1px solid black;

Entspricht X-Elementen mit mehreren durch Leerzeichen getrennten Werten im Attribut, von denen einer gleich „bar“ ist, wie im folgenden Beispiel:

17

X:markiert

input[type=radio]:checked { border: 1px solid black;🎜>

Dieser Selektor wird hauptsächlich für das Kontrollkästchen verwendet. Wählen Sie das Kontrollkästchen als aktuell ausgewähltes Tag aus.

18

X:nachher

.clearfix:after { content: ""; display: clear: Both; height: 0; : 1%; }

vor und nach dem Einfügen von Inhalten vor oder nach dem ausgewählten Tag. Sie werden im Allgemeinen zum Löschen von Floats verwendet, sind jedoch für IE6 und IE7 nicht verfügbar.

19

X:hover

div:hover { Hintergrund: #e3e3e3;🎜>

Das am häufigsten verwendete Tag ist das A-Tag, aber unter dem IE6-Browser stimmen mit Ausnahme des A-Tags andere Tags div:hover nicht überein.

20

X:not(selector)

*:not(p) { color: green;

Wählt Beschriftungselemente außer dem Selektor in () aus.

21

X::pseudoElement

p::first-line { Schriftgröße: fett; } p::erster Buchstabe { float: links; Schriftgröße: fett; Schriftfamilie: kursiv; padding-right: 2px;

werden verwendet, um die erste Zeile bzw. den ersten Buchstaben des Elements abzugleichen. Siehe Beispiele:

22

X:nth-child(n)

li:nth-child(3) { color: red }

Entspricht den ersten Tags im X-Element. Der obige Code entspricht beispielsweise dem dritten li-Tag.

23

X:nth-last-child(n)

li:nth-last-child(2) { color: red }

Im Gegensatz zum vorherigen Selektor gleicht dieser Selektor die Tags in umgekehrter Reihenfolge ab. Der obige Code bedeutet, dass er mit dem vorletzten li-Tag übereinstimmt

24

X:nth-of-type(n)

ul:nth-of-type(3) { border: 1px solid black;

ähnelt :nth-child(), gleicht jedoch nur Elemente ab, die dasselbe Tag

verwenden

25

X:nth-last-of-type(n)

ul:nth-last-of-type(3) { border: 1px solid black;

ähnelt :nth-last-child(), gleicht jedoch nur Elemente ab, die dasselbe Tag

verwenden

26

X:erstes Kind

ul li:first-child { border-top: none }

entspricht dem n-ten untergeordneten Element seines übergeordneten Elements, das erste hat die Nummer 1

27

X:last-child

ul > li:last-child { color: green }

entspricht dem n-ten untergeordneten Element seines übergeordneten Elements, die erste Zahl ist 1

28

X:nur-Kind

div p:only-child { color: red;

entspricht dem einzigen untergeordneten Element unter dem übergeordneten Element, was äquivalent ist zu: first-child:last-child oder :nth-child(1):nth-last-child(1)

29

X:only-of-type

li:only-of-type {font-weight:bold }

stimmt mit dem einzigen untergeordneten Element überein, das denselben Tag unter dem übergeordneten Element verwendet, was äquivalent ist mit: first-of-type:last-of-type oder:nth-of-type(1):nth-last -of -type(1)

30

X:first-of-type

li:only-of-type {font-weight:bold }

entspricht dem ersten untergeordneten Element unter Verwendung desselben Tags unter dem übergeordneten Element, was äquivalent ist zu: nth-of-type(1)