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
 /* 从父集到子孙集的选择器 */

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

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

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

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

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

Was ist Kaskadierung? ?

Stapelbarkeit:

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

CSS-Prioritätssortierung

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
[

】

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

, 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!