Zusammenfassung der Selektortypen in CSS und Effizienzvergleichsbeispiele

Dieser Artikel stellt hauptsächlich die Zusammenfassung und den Effizienzvergleich von Selektortypen in CSS vor, einschließlich Pseudoklassenselektoren und Pseudoelementselektoren. Freunde in Not können darauf verweisen

Wir alle wissen, dass CSS Additivität hat (. Dasselbe Element wird durch mehrere Stilregeln angegeben), Vererbung (nachkommende Elemente erben einige Stile und Attribute der Vorgängerelemente) und Priorität (aufgrund der Überlagerung und Vererbung von CSS wird eine Priorität generiert, die sich darauf bezieht, welche Stilregel letztendlich angewendet wird Auf das angegebene Element einwirken? Es folgt nur einer Regel. Je spezifischer es ist, desto höher ist die Priorität.)

Aus dem Obigen ist ersichtlich, dass die Priorität umso höher ist, je spezifischer der Selektor ist Je höher die Ebene,

Hier fassen wir die CSS-Selektoren zusammen:

1

.info
2. Mehrfachelement-Kombinationsselektoren (Beschriftungsselektor [Gruppenselektor], Nachkommenselektor, Unterelementselektor, Nachbarselektor)

Selektor

Beschreibung

CSS-Version

E

Tag-Selektor, gleicht alle Elemente ab, die das E-Tag verwenden

*

Universeller Elementselektor, passt zu jedem Element

选择器	描述	CSS版本
E	标签选择器，匹配所有使用E标签的元素
*	通用元素选择器，匹配任何元素
.info	class选择器，匹配所有class属性中包含info的元素
#footer	id选择器，匹配所有id属性等于footer的元素

Klassenselektor, der alle Elemente abgleicht, die Informationen im Klassenattribut enthalten

#footer

id-Selektor, stimmt mit allen Elementen überein, deren ID-Attribut gleich der Fußzeile ist

选择器	描述	CSS版本
E，F	多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号隔开
E F	包含选择符，匹配所有被E元素包含的F元素
E>F	子元素选择器，匹配所有E元素的儿子元素F
E+F	毗邻元素选择器，匹配所有紧随E元素之后的同级元素F
E~F	匹配任何E标签之后的同级F标签

Selektor Beschreibung CSS-Version E, F Multi-Element-Selektor, der alle E-Elemente oder F-Elemente gleichzeitig abgleicht, zwischen E und F durch Komma getrennt verwenden
E F Enthält Selektoren, passend zu allen F-Elementen, die in E-Elementen enthalten sind td> E>F Selektor für untergeordnete Elemente, entspricht allen untergeordneten Elementen F
E+F Selektor für benachbarte Elemente, passend zu allen Geschwisterelementen F, die dem E-Element E~ folgen F Übereinstimmung mit jedem Geschwister-F-Tag nach dem E-Tag

3. Attributselektor

选择器	描述	CSS版本
E[attribute]	匹配所有具有attribute属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。）	2.1
E[attribute=value]	匹配所有attribute属性等于“value”的E元素	2.1
E[attribute~=value]	匹配所有attribute属性具有多个空格分隔的值、其中一个值等于“value”的E元素	2.1
E[attribute^=value]	匹配任何E标签之后的同级F标签	2.1
E[attribute$=value]	匹配所有attribute属性值包含有“value”的E元素	3
E[attribute*=value]	匹配所有attribute属性值是以"value"结束的E元素	3

4. Pseudoklassenselektor

5. Pseudoelementselektor

选择器	描述	CSS版本
E:first-line	匹配所有E标签内的第一行	2.1
E:first-letter	匹配所有E标签内的第一个字母	2.1
E:before	在E标签之前插入生成的内容	2.1
E:after	在E标签之后插入生成的内容	2.1

Hier müssen wir wissen, wie der Browser den Selektor liest. Chris Coyier sagte einmal in dem Artikel „CSS effizient rendern“, dass „der Browser Ihren Selektor liest und dem Prinzip folgt, von rechts nach links vom Selektor zu lesen. Mit anderen Worten, die Reihenfolge, in der der Browser den Selektor liest, ist Fortfahren.“ von rechts nach links.“

Der letzte Teil des Selektors, der sich ganz rechts im Selektor befindet (in diesem Fall der a[title]-Teil), wird „Schlüsselselektor“ genannt und bestimmt wie die Effizienz Ihres Selektors? Ist es hoch oder niedrig?

Wie kann man also Schlüsselselektoren effektiver und leistungsfähiger machen? Tatsächlich ist es ganz einfach, einen Punkt zu verstehen: „Je spezifischer der Schlüsselselektor ist, desto höher ist seine Leistung.“

Selektoren haben eine inhärente Effizienz gegeben von Steve Souders:

1.id-Selektor (#Myid)
2. 2. Klassenselektor (.myclassname)
3. Tag Selee (P, H1, P)
4 . Erweiterter Selektor (H1+P)
5. Untergeordneter Selektor (ul > li)
6. Nachkommenselektor (li a)
7. Platzhalterselektor (*)
8. Attributselektor ( a[rel ="external"])
9. Pseudoklassenselektor (a:hover, li:nth-child)
Die Effizienz der oben genannten neun Selektoren und des ID-Selektors wird von hoch nach niedrig eingestuft ist die Basis. Die Effizienz ist am höchsten, während die Effizienz des Pseudoklassenselektors am niedrigsten ist.

Vergleichen wir diese Beispiele, um zu sehen, wer am effizientesten ist:

1. #myId span
2. span #myId
Aus dem obigen Beispiel können wir erkennen, dass die Effizienz unten höher ist als die oben. Da der Schlüsselselektor ganz rechts am spezifischsten ist, entspricht er auch der oben genannten Prioritätsreihenfolge der Selektoren.

Das obige ist der detaillierte Inhalt vonZusammenfassung der Selektortypen in CSS und Effizienzvergleichsbeispiele. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!