Prioritäts- und Gewichtsanalyse von CSS-Selektoren

<p>Dieser Artikel teilt Ihnen hauptsächlich die Prioritäts- und Gewichtsanalyse von CSS-Selektoren mit und hofft, Ihnen dabei zu helfen, mehr über CSS-Selektoren zu erfahren.

Basisselektor

选择器	名 称	实 例	描 述	版 本
*	通用选择器（Universal selectors）	*	匹配所有的元素	2.1
E	标签选择器（Type selectors）	p	匹配所有的 <p>	1
.class	类选择器（Class selectors）	.nav	匹配所有 class="nav" 的元素	1
#id	ID选择器（ID selectors）	#wrapper	匹配所有 id="wrapper" 的元素	1
E[attr]	属性选择器（Attribute selectors）	a[data-url]	匹配所有 data-url 属性的 <a> 的元素	2.1
E[attr=val]	属性选择器（Attribute selectors）	a[data-url='http']	匹配所有 data-url="http" 属性的 <a> 的元素	2.1
E[attr~=val]	属性选择器（Attribute selectors）	a[data-url~='http']	匹配所有 data-url 属性包含 http 的 <a> 元素	2.1
E[attr^=val]	属性选择器（Attribute selectors）	a[data-url^='http']	匹配所有 data-url 属性以 http 开头的 <a> 元素	3
E[attr$=val]	属性选择器（Attribute selectors）	a[data-url$='http']	匹配所有 data-url 属性以 http 结尾的 <a> 元素	3
E[attr*=val]	属性选择器（Attribute selectors）	a[data-url*='http']	匹配所有 data-url 属性包含 http 的 <a> 元素	3
E F	后代选择器（Descendant selectors）	p p	匹配所有 <p> 元素下所有 <p> 元素	1
E > F	子选择器（Child selectors）	p p	匹配所有 <p> 元素下所有子 <p> 元素	2.1
E + F	相邻兄弟选择器	label + input	匹配所有 <label> 元素同级的第一个 <input> 元素	2.1
E ~ F	兄弟选择器	label ~ input	匹配所有 <label> 元素同级的所有 <input> 元素	3
S1,S2,.....	选择器分组	label,input	匹配所有 <label>,<input> 元素	1

Pseudoklassen und Pseudoelemente

<p> Pseudoklassen werden verwendet, um einen bestimmten Zustand oder eine bestimmte Bedingung des Selektors anzugeben. Die Klasse existiert nicht in im DOM, ist aber für den Benutzer sichtbar.

Dynamische Pseudoklassen

<p> Dynamische Pseudoklassen klassifizieren Elemente mit anderen Merkmalen als ihrem Namen, ihren Attributen oder ihrem Inhalt und werden nicht in der Dokumentquelle oder im Textbaum angezeigt.

选择器	实 例	描 述	版 本
:link	a:link	匹配未被访问的链接	1
:visited	a:visited	匹配被访问过的链接	1
:hover	a:hover	匹配鼠标指针在其浮动的元素	1
:active	a:active	匹配鼠标指针在其上按下的元素	1
:focus	input:focus	匹配获得焦点的元素	2.1

Die Ziel-Pseudoklassen

<p> Die Ziel-Pseudoklasse gibt den aktuell aktiven Anker an. Sie können die Ziel-Pseudoklasse verwenden, um Stile für den aktiven Anker festzulegen.

选择器	实 例	描 述	版 本
:target	#tab1:target	匹配活动的锚	3

Die Sprachpseudoklassen

<p> Die Sprachpseudoklassen fügen Stile zu Elementen mit dem angegebenen lang-Attribut hinzu.

选择器	实 例	描 述	版 本
:lang(val)	#p:lang(en)	匹配带有指定 lange="en" 的 <p> 元素	3

Das UI-Element gibt Pseudoklassen an (Das UI-Element gibt Pseudoklassen an)

<p>Die UI-Elementstatus-Pseudoklassen werden hauptsächlich verwendet, um den Status von Elementen im Formular anzugeben . Die Attribute

选择器	实 例	描 述	版 本
:enabled	input:enabled	匹配启动的元素	3
:disabled	input:disabled	匹配禁用的元素	3
:checked	input:checked	匹配被选中的元素	3

display und visibility haben keine Auswirkung auf den Pseudoklassen-Übereinstimmungsstatus enabled/disabled des UI-Elementstatus.

Strukturelle Pseudoklassen

<p> Strukturelle Pseudoklassen werden verwendet, um die spezifische Struktur des Dokuments anzugeben.

选择器	实 例	描 述	版 本
:root	:root	匹配文档的根元素	3
:nth-child(n)	:nth-child(n)	匹配其父元素的第 n 个子元素	3
:nth-last-child(n)	:nth-last-child(n)	匹配其父类倒数第 n 个子元素	3
:nth-of-type(n)	:nth-of-type(n)	匹配其父类第 n 个有着相同选择器的子元素	3
:nth-last-of-type(n)	:nth-last-of-type(n)	匹配其父类倒数第 n 个有着相同选择器的子元素	3
:first-child	:first-child	匹配其父类元素的第一个子元素	3
:last-child	:last-child	匹配其父类元素的最后一个子元素	3
:last-child	:last-child	匹配其父类元素的最后一个子元素	3
:first-of-type	:first-of-type	匹配其父类元素第一个有着相同选择器的子元素	3
:last-of-type	:first-of-type	匹配其父类元素最后一个有着相同选择器的子元素	3
:only-child	:only-child	匹配其父类的唯一子元素	3
:only-of-type	:only-child	匹配其父类的唯一有着相同选择器的子元素	3
:empty	:empty	匹配没有子元素（包括文字节点）的元素	3

:nth-child(n), :nth-last-child(n), :nth-of-type(n), :nth-last-of-type(n) wobei n eine ganze Zahl ist, die bei 0 beginnt, kann der Ausdruck als an+b geschrieben werden, a und b sind 0 oder eine positive ganze Zahl, die Schreibweise des Ausdrucks entspricht der Aufteilung jedes Unterelements in eine Gruppe und der Verwendung des b-ten Elements jeder Gruppe als Unterelement mit ungerader und gerader Nummer Ausdrücke können als 2n+1 或 even, 2n 或 odd geschrieben werden.

<p> Eine negative Pseudoklasse wird verwendet, um alle anderen Elemente auszuwählen, die keine Elemente des angegebenen Typs sind.

选择器	实 例	描 述	版 本
:not(s)	input:not([type="text"])	匹配所有非指定类型的其他元素	3

Pseudoelemente

<p> Pseudoelemente beziehen sich auf Abstraktionen, die im Dokumentbaum nicht vorhanden sind.

选择器	实 例	描 述	版 本
::first-line	::first-line	匹配元素文本内容的首行	1
::first-letter	::first-letter	匹配元素文本内容的首个字母	1
::before	::before	元素之前	2.1
::after	::after	元素之后	2.1

In CSS 1 und CSS 2 gibt es nur ein „:“ im Pseudoklassenselektor, während CSS 3 zwei „::“ hat, um Pseudoklassen und Pseudoelemente zu unterscheiden. Derzeit sind die beiden Schreibweisen Methoden haben den gleichen Effekt. <p>::before und ::after müssen das Attribut content setzen, sonst werden die Elemente nicht wirksam.

Priorität und Gewichtung

<p>Die Gewichtung in CSS ist in 4 Stufen unterteilt:

• <p>Inline-Stil (Stil in HTML-Dokumentattributen)

• <p>ID-Selektor

• <p> Klasse, Pseudoklasse, Attributselektor

• <p> Element, Pseudoklasse Elemente

<p> Diese 4 Ebenen stellen unterschiedliche Prioritäten von hoch bis niedrig dar. !important wird nach der CSS-Regel geschrieben und die entsprechende Regel kann auf die höchste Gewichtung heraufgestuft werden.

<p>Verwandte Empfehlungen:

<p>CSS-Selektor-Beispielfreigabe

<p>Detaillierte Erläuterung der neuen Verwendung des CSS-Selektors

<p>So implementieren Sie die Analyse von CSS-Auswahlfeldern

Das obige ist der detaillierte Inhalt vonPrioritäts- und Gewichtsanalyse von CSS-Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!