Heim >Web-Frontend >js-Tutorial >Prioritäts- und Gewichtsanalyse von CSS-Selektoren

Prioritäts- und Gewichtsanalyse von CSS-Selektoren

小云云
小云云Original
2018-02-28 13:30:411771Durchsuche
<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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn