Analyse de priorité et de poids des sélecteurs CSS

<p>Cet article partage principalement avec vous l'analyse de la priorité et du poids des sélecteurs CSS, dans l'espoir de vous aider à en savoir plus sur les sélecteurs CSS.

Sélecteur de base

选择器	名 称	实 例	描 述	版 本
*	通用选择器（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

Pseudo-classes et pseudo-éléments

<p> Les pseudo-classes sont utilisées pour spécifier un état ou une condition spécifique du sélecteur. La classe n'existe pas dans. le DOM, mais est visible par l'utilisateur.

Pseudo-classes dynamiques

<p> Les pseudo-classes dynamiques classent les éléments avec des caractéristiques autres que leur nom, leurs attributs ou leur contenu, et ne seront pas affichées dans la source du document ou dans l'arborescence du texte.

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

Les pseudo-classes cibles

<p> La pseudo-classe cible spécifie l'ancre actuellement active. Vous pouvez utiliser la pseudo-classe cible pour définir des styles pour l'ancre active.

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

Les pseudo-classes du langage

<p> Les pseudo-classes du langage ajoutent des styles aux éléments avec l'attribut lang spécifié.

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

L'élément UI déclare des pseudo-classes (L'élément UI déclare des pseudo-classes)

<p> Les pseudo-classes d'états d'élément UI sont principalement utilisées pour spécifier le statut des éléments sous la forme . Les attributs

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

display et visibility n'ont aucun effet sur l'état de la pseudo-classe de l'élément d'interface utilisateur correspondant à l'état enabled/disabled.

Pseudo-classes structurelles

<p> Les pseudo-classes structurelles sont utilisées pour spécifier la structure spécifique du document.

选择器	实 例	描 述	版 本
: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) où n est un entier commençant à 0, l'expression peut s'écrire an+b, a et b sont 0 ou Entier positif, la façon d'écrire l'expression équivaut à diviser chaque sous-élément en un groupe, et à prendre le b-ième élément de chaque groupe pour prendre les sous-éléments impairs et pairs, le ; les expressions peuvent être écrites comme 2n+1 或 even, 2n 或 odd.

<p> La pseudo-classe négative est utilisée pour sélectionner tous les autres éléments qui ne sont pas des éléments du type spécifié.

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

Pseudo-éléments

<p> Les pseudo-éléments font référence à des abstractions qui n'existent pas dans l'arborescence du document.

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

En CSS 1 et CSS 2, il n'y a qu'un seul ":" dans le sélecteur de pseudo-classe, alors que CSS 3 en a deux "::" afin de distinguer les pseudo-classes et les pseudo-éléments. Actuellement, les deux écritures. les méthodes ont le même effet. <p>::before et ::after doivent définir l'attribut content, sinon les éléments ne prendront pas effet.

Priorité et poids

<p> Le poids en CSS est divisé en 4 niveaux :

• <p>Style en ligne (style dans les attributs du document HTML)

• <p>Sélecteur d'ID

• <p> classe, pseudo-classe, sélecteur d'attribut

• <p> élément, pseudo-classe éléments

<p> Ces 4 niveaux représentent différentes priorités de haut en bas !important est écrit après la règle CSS, et la règle correspondante peut être promue au poids le plus élevé.

<p>Recommandations associées :

<p>Partage d'exemples de sélecteur CSS

<p>Explication détaillée de la nouvelle utilisation du sélecteur CSS

<p>Comment implémenter l'analyse des champs de sélection CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!