Zusammenfassung der Prioritätsreihenfolge der CSS-Selektoren!

Dieser Artikel stellt Ihnen hauptsächlich die CSS-Selektor-Prioritätsreihenfolge vor.

Zuallererst sollte jeder wissen, was ein CSS-Selektor ist, oder?

Wenn wir beim Entwerfen einer Webseite CSS verwenden, um eine Eins-zu-Eins-, Eins-zu-Viele- oder Viele-zu-Eins-Kontrolle über die Elemente in der HTML-Seite zu erreichen, müssen wir CSS-Selektoren verwenden.

Die Elemente in der HTML-Seite werden über CSS-Selektoren gesteuert.

Vereinfacht ausgedrückt kann der Selektor so verstanden werden.

Jede CSS-Stildefinition besteht aus zwei Teilen, die Form ist wie folgt:

[code] selector {style} [/code] Der Teil vor {} ist „selector“ ".

Der „Selektor“ gibt das Objekt des „Stils“ in {} an, d. h. auf welche Elemente auf der Webseite der „Stil“ wirkt.

Dann können Sie kurz verstehen, Was sind die Kategorien von CSS-Selektoren?

1. Tag-Selektor

body,div,p,ul,li...

2. Klassen-Selektor

class="demo"
class="demo_1"

3

id="name",id="name_t"

4. Globaler Selektor

*

5. Kombinationsselektor

.demo .demo_1
/*两选择器用空格键分开*/

6, Nachkommenselektor

#head .nav ul li
 /* 从父集到子孙集的选择器 */

7. Gruppenselektor

div,span,img {color:blue}
/*即具有相同样式的标签分组显示*/

8. Pseudoklassenselektor

div p
/*两选择器用空格键分开*/

10

link、visited、active、hover...
/* 链接样式,a元素的伪类，4种不同的状态*/

11. Unterselektor

^ $ *
/*分别对应开始、结尾、包含*/

12. CSS-Nachbarschaftsselektor

div>p
/* 带大于号>*/

Umfassendes Verständnis der CSS-Klassifizierung, jeder muss auch kurz verstehen

Was ist Kaskadierung? ?

Stapelbarkeit:

ist die Fähigkeit von CSS, mit Konflikten umzugehen. Stapelbarkeit ist eine Fähigkeit. Wenn mehrere Selektoren dasselbe Attribut beschreiben, auf wen sollte dieses Attribut hören?

Dann fassen wir unten die Prioritätsreihenfolge der CSS-Selektoren

zusammen!

CSS-Prioritätssortierung

!important >ID-Selektor> Tag> Browser-Standardattribute

Die Grundlage für diese Sortierung liegt hauptsächlich darin, dass jeder Selektor sein eigenes Gewicht hat und jede CSS-Regel eine Gewichtungsstufe enthält, die eine andere Auswahl darstellt. Wird mithilfe gewichteter Gewichte berechnet. Unterschiedliche Gewichtungen führen zu unterschiedlichen Stilen, und unterschiedliche Stile werden auf Ihren Webseiten widergespiegelt. Ausführliche Informationen zur CSS-Gewicht finden Sie in diesem Artikel
[

Was ist das Maß für die Priorität in CSS? Einführung in die Verwendung von CSS-Gewicht

】

Wenn Sie mehr über das Frontend erfahren möchten, können Sie der chinesischen PHP-Website

CSS-Video-Tutorial

, Bootstrap folgen Tutorial usw. Tutorial, jeder ist herzlich eingeladen, sich darauf zu beziehen und es zu studieren!

Das obige ist der detaillierte Inhalt vonZusammenfassung der Prioritätsreihenfolge der CSS-Selektoren!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!