CSSセレクターの優先順位と重みの分析

<p>この記事では主に CSS セレクターの優先順位と重み分析について説明し、CSS セレクターについてさらに学ぶのに役立つことを願っています。

基本セレクター

セレクター	名前	インスタンス	説明	バージョン
*	ユニバーサルセレクター	* *	匹配所有的元素	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

伪类和伪元素

<p>  伪类（Pseudo-classes）用于指定选择器的某种特定状态或条件，伪类在 DOM 中并不存在，但对用户却是可见的。

动态伪类（Dynamic pseudo-classes）

<p>  动态伪类对除了其名称、属性或内容之外的特性的元素进行分类，不会显示在文档源或文树中。

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

目标伪类（The target pseudo-classes）

<p>  目标伪类指定当前活动的锚，使用目标伪类可以为活动的锚设置样式。

すべての要素を一致させる 2.1E

选择器	实 例	描 述	版 本
:target	#tab1:target

🎜タグセレクター(型セレクター)🎜🎜p🎜🎜すべて一致<p>🎜 🎜1🎜🎜🎜🎜.class🎜🎜クラス セレクター 🎜🎜.nav🎜🎜 class="nav" を持つすべての要素と一致します 🎜🎜1🎜 🎜🎜🎜#id🎜🎜ID セレクター 🎜🎜# Wrapper🎜🎜は、id="wrapper"を持つすべての要素と一致します🎜🎜1🎜🎜🎜🎜 E[attr]🎜🎜属性セレクター🎜🎜a[data-url]🎜🎜 すべての <code>data-url 属性の <a&gt に一致します ; 要素 🎜🎜2.1🎜🎜🎜🎜E[attr=val]🎜🎜 属性セレクター 🎜🎜 a[data-url='http']🎜🎜 data-url="http" 属性を持つすべての <a> 要素と一致します。 🎜🎜2.1🎜🎜🎜🎜E[attr~=val]🎜🎜属性セレクター (属性セレクター) 🎜🎜a[data-url~='http']🎜🎜はすべての data と一致します-<code>http code><a> 要素を含む URL 属性 🎜🎜2.1🎜🎜🎜🎜E[attr^=val]🎜🎜属性セレクター🎜🎜 a[data-url^='http'] 🎜🎜は、http で始まるすべての data-url 属性と一致します [attr$=val]🎜🎜 属性セレクター🎜🎜a[data-url$='http']🎜🎜は、data-url 属性 <a> 要素と一致します。 code>http 🎜🎜3🎜🎜🎜🎜E[attr*=val]🎜🎜属性セレクター🎜🎜a[data-url*='http']🎜🎜はすべてのhttp <a> code> 要素を含む code>data-url 属性 🎜🎜3🎜🎜🎜🎜E F🎜🎜子孫セレクター 🎜🎜p p🎜🎜 すべての 要素 ><p> 要素 🎜🎜1🎜🎜🎜🎜E > の下のすべての <p> 要素と一致します。 (子セレクター) 🎜🎜p p🎜🎜すべての <p&gt ; 要素に一致します <p> 要素 🎜🎜2.1🎜 🎜🎜🎜E + F🎜🎜隣接する兄弟セレクター🎜🎜label + input 🎜🎜 すべての < の兄弟内の最初の <code> <input&gt> 要素と一致します。 label> 要素 🎜🎜2.1🎜🎜🎜🎜E ~ F🎜🎜兄弟セレクター🎜 🎜label ~ input🎜🎜 は、次のすべての <label> 要素と一致します。すべての <input> 要素と同じレベル 🎜🎜3🎜🎜🎜🎜 S1,S2,....🎜🎜セレクターのグループ化🎜🎜label,input🎜🎜すべての <label>、<input> 要素に一致します🎜🎜1 🎜🎜🎜🎜🎜疑似クラスと疑似要素🎜🎜 疑似クラスは、セレクター。疑似クラスは DOM には存在しませんが、ユーザーには表示されます。 🎜

動的擬似クラス

🎜 動的擬似クラスは、名前、属性、コンテンツ以外の特性を持つ要素を分類し、ドキュメント ソースやテキスト ツリーには表示されません。 🎜🎜🎜🎜🎜セレクター 🎜🎜インスタンス 🎜🎜説明 🎜🎜バージョン 🎜🎜🎜🎜🎜🎜:link🎜🎜a:link🎜🎜未訪問のリンクと一致🎜🎜1 🎜🎜 🎜 🎜:訪問しました🎜 🎜a:visited🎜🎜訪問済みのリンクと一致します🎜🎜1🎜🎜🎜🎜:hover🎜🎜a:hover🎜🎜マウスポインターが位置する場所と一致しますそのフローティング要素🎜🎜 1🎜🎜🎜🎜:active🎜🎜a:active🎜🎜は、マウスポインターが押されている要素と一致します🎜🎜1🎜🎜🎜🎜:focus🎜🎜input:focus🎜🎜フォーカスを受け取る要素と一致します🎜🎜2.1🎜🎜🎜🎜

ターゲット疑似クラス

🎜 ターゲット疑似クラスは、現在アクティブなアンカーを指定します。ターゲット疑似クラスは、アクティブなアンカーをスタイル設定できます。アンカー。 🎜🎜🎜🎜🎜セレクター🎜🎜例🎜🎜説明🎜🎜バージョン🎜🎜🎜🎜🎜🎜:target🎜🎜#tab1:target🎜🎜アクティブなアンカーと一致します🎜🎜3 🎜🎜🎜🎜

言語擬似クラス

<p> 言語擬似クラスは、指定された lang 属性を持つ要素にスタイルを追加します。

lang 属性元素添加样式。

セレクター	インスタンス	説明	バージョン

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

UI元素状态伪类（The UI element states pseudo-classes）

<p>  UI元素状态伪类主要用于指定表单中的元素状态。

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

display 和 visibility 属性对于UI元素状态伪类匹配 enabled/disabled 状态没有影响。

结构性伪类（Structural pseudo-classes）

<p>  结构性伪类用于指定文档的特定结构。

选择器	实 例	描 述	版 本
: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) 中 n 是从 0 开始的整数，表达式可写成 an+b， a 和 b 是 0 或正整数，表达式的写法相当于把每 a 个子元素分成一组，取每组的第 b 个元素；取第奇数、偶数个子元素可写表达式为 2n+1 或 even、2n 或 odd。

<p>  否定伪类是用来选择所有非指定类型元素的其他元素。

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

伪元素

<p>  伪元素（Pseudo-elements）是指不存在与文档树中的抽象。

:lang(val)#p:lang(en)は指定された lange="en" code> と一致しますの <p> 要素 3

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

🎜🎜🎜🎜UI 要素は疑似クラスを示します (UI 要素は疑似クラスを示します) 🎜🎜 UI 要素は疑似クラスが主に指定されたクラスで使用されることを示しますフォーム要素のステータス。 🎜🎜:enabled🎜🎜input:enabled🎜🎜はアクティブ化された要素と一致します🎜🎜3🎜🎜🎜:disabled🎜🎜input :無効🎜🎜無効な要素と一致します🎜🎜3🎜🎜🎜:checked🎜🎜input:checked🎜🎜選択された要素と一致します🎜🎜3🎜🎜🎜🎜display 属性と visibility 属性は、enabled/disabled 状態に一致する UI 要素の状態疑似クラスには影響しません。 🎜構造擬似クラス🎜🎜 構造擬似クラスは、ドキュメントの特定の構造を指定するために使用されます。

セレクター	インスタンス	説明	バージョン

🎜🎜: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 code>🎜🎜は、同じセレクターを持つ親クラスの唯一の子要素と一致します🎜🎜3🎜🎜<tr>🎜:empty🎜🎜<code>:empty🎜🎜は、子要素（テキストノードを含む）に一致しません要素 🎜🎜3🎜🎜🎜🎜

:nth-child(n), :nth-last-child(n), : nth-of -type(n), :nth-last-of-type(n) ここで、n は 0 から始まる整数で、式は として記述できます。 +b、a と b は 0 または正の整数です。式の書き方は、各 a サブ要素をグループに分割し、各グループの b 番目の要素を取得することと同じです。番号付きおよび偶数番号のサブ要素を記述できます。式は 2n+1 または偶数、2n または奇数です。

🎜 負の疑似クラスは、指定された型の要素ではない他のすべての要素を選択するために使用されます。

セレクター	インスタンス	説明	バージョン

🎜🎜:not(s)🎜🎜input:not([type="text"])🎜🎜は、指定された要素以外のすべての要素と一致しますtype🎜 🎜3🎜🎜🎜🎜🎜疑似要素🎜🎜 疑似要素は、ドキュメント ツリーに存在しない抽象化を指します。

セレクター	インスタンス	説明	バージョン

🎜🎜::first-line🎜🎜::first-line🎜🎜要素のテキストコンテンツの最初の行と一致します🎜🎜1🎜🎜 🎜 ::first-letter🎜🎜::first-letter🎜🎜は要素のテキストコンテンツの最初の文字と一致します🎜🎜1🎜🎜🎜::before🎜🎜:: before🎜🎜要素前🎜🎜2.1🎜🎜🎜::after🎜🎜::after🎜🎜要素後🎜🎜2.1🎜🎜🎜🎜

CSS 1 と CSS 2 では、疑似クラスセレクター内の「:」は 1 つだけでしたが、CSS 3 では疑似クラスと疑似要素を区別するために 2 つの「::」に変更されました。同じ効果があります。 <p>::before と ::after は content 属性を設定する必要があります。設定しない場合、要素は有効になりません。 ::before 与 ::after 必须设置 content 属性，否则元素不能生效。

优先级和权重

<p>   CSS 中的权重分别为 4 个等级：

• <p>内联样式（HTML 文档中的 style 属性）

• <p>ID 选择器

• <p>类、伪类、属性选择器

• <p>元素、伪类元素

<p>这 4 个等级由高到低代表不同的优先级，!important

優先度と重み

CSS には 4 つの重みレベルがあります: <p>

• 
  インライン スタイル (HTML ドキュメントのスタイル属性) )
• <p>ID セレクター

• クラス、疑似クラス、属性セレクター
• <p> 要素、疑似クラス要素 li>これらの 4 つのレベルは、高から低までの異なる優先度を表します。! important は、対応するルールを最高の重みに上げるために CSS ルールの後に記述されます。
  <p>関連する推奨事項:
  🎜CSS セレクターの例の共有🎜🎜🎜🎜 CSS セレクターの新しい使用法の詳細な説明🎜🎜🎜🎜 CSS セレクター フィールドの解析を実装する方法🎜🎜

セレクター	インスタンス	説明	バージョン

以上がCSSセレクターの優先順位と重みの分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。