CSS 선택자의 우선순위 및 가중치 분석

<p>이 글에서는 주로 CSS 선택자의 우선순위와 가중치 분석을 공유하며, CSS 선택기에 대해 더 자세히 배우는 데 도움이 되기를 바랍니다.

기본 선택기

Selector	Name	Instance	Description	Version
*	범용 선택기	* *	匹配所有的元素	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 선택기 🎜🎜#가 있는 모든 요소와 일치합니다. 래퍼🎜🎜는 id="wrapper"🎜🎜1🎜🎜🎜🎜 E[attr]🎜🎜속성 선택기🎜🎜a[data-url]🎜🎜모든 <code>data-url 속성의 <a&gt와 일치 ; 요소 🎜🎜2.1🎜🎜🎜🎜E[attr=val]🎜🎜속성 선택기 🎜🎜 a[data-url='http']🎜🎜 모든 <a> 요소를 data-url="http" 속성과 일치시킵니다. 🎜🎜2.1🎜🎜🎜🎜E[attr~=val]🎜🎜속성 선택기(속성 선택기) 🎜🎜a[data-url~='http']🎜🎜모든 데이터와 일치 - <code>http code><a> 요소 🎜🎜2.1🎜🎜🎜🎜E[attr^=val]🎜🎜속성 선택기🎜🎜를 포함하는 URL 속성 a[data-url^='http'] 🎜🎜는 http [attr$=val]🎜🎜속성 선택기로 시작하는 모든 data-url 속성과 일치합니다. 🎜🎜a[data-url$='http']🎜🎜는 data-url 속성 <a> 요소와 일치합니다. code>http 🎜🎜3🎜🎜🎜🎜E[attr*=val]🎜🎜속성 선택기🎜🎜a[data-url*='http']🎜🎜모두 일치 http <a> code> 요소 🎜🎜3🎜🎜🎜🎜E F🎜🎜하위 항목 선택기 🎜🎜p pdata-url 속성 /code>🎜🎜는 모든 요소 ><p> 요소 🎜🎜1🎜🎜🎜🎜E > F🎜🎜하위 선택기 아래의 모든 <p> 요소와 일치합니다. (하위 선택자) 🎜🎜p p🎜🎜는 모든 <p> 요소 <p> 요소 🎜🎜2.1🎜 아래의 모든 하위 항목과 일치합니다. 🎜🎜🎜E + F🎜🎜인접 형제 선택기🎜🎜label + input 🎜🎜 모든 의 첫 번째 <input> 요소와 일치합니다. /code> 요소 🎜🎜2.1🎜🎜🎜🎜E ~ F🎜🎜Sibling Selector🎜 🎜label ~ input🎜🎜는 동일한 수준의 모든 <label> 요소와 일치합니다. 모든 <input> 요소 🎜🎜3🎜🎜🎜🎜 S1,S2,...🎜🎜선택기 그룹화🎜🎜label,input🎜🎜는 모두 <label>,<input> elements🎜🎜1 🎜🎜🎜🎜🎜Pseudo-classes 및 pseudo-elements🎜🎜 Pseudo-classes는 선택기의 특정 상태 또는 조건을 지정하는 데 사용됩니다. -클래스는 DOM에 존재하지 않지만 사용자에게 표시됩니다. 🎜

동적 의사 클래스

🎜 동적 의사 클래스는 이름, 속성 또는 내용 이외의 특성으로 요소를 분류하며 문서 소스 또는 텍스트 트리에 표시되지 않습니다. 🎜🎜🎜🎜🎜 선택기 🎜🎜 인스턴스 🎜🎜 설명 🎜🎜 버전 🎜🎜🎜🎜🎜🎜:link🎜🎜a:link🎜🎜방문하지 않은 링크 일치🎜🎜1 🎜🎜 🎜 🎜:방문함🎜 🎜a:visited🎜🎜방문한 링크와 일치🎜🎜1🎜🎜🎜🎜:hover🎜🎜a:hover🎜🎜마우스 포인터가 있는 위치와 일치 부동 요소 🎜🎜 1🎜🎜🎜🎜:active🎜🎜a:active🎜🎜는 마우스 포인터가 눌려진 요소와 일치합니다. 🎜🎜1🎜🎜🎜🎜:focus🎜🎜input:focus🎜🎜포커스를 받는 요소와 일치합니다🎜🎜2.1🎜🎜🎜🎜

대상 의사 클래스

🎜 대상 의사 클래스는 현재 활성 앵커를 지정합니다. 대상 의사 클래스는 활성 앵커의 스타일을 지정할 수 있습니다. 닻. 🎜🎜🎜🎜🎜Selector🎜🎜Example🎜🎜Description🎜🎜Version🎜🎜🎜🎜🎜🎜: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 속성은 활성화/비활성화 상태와 일치하는 UI 요소 상태 의사 클래스에 영향을 주지 않습니다. 🎜구조적 의사 클래스🎜🎜 구조적 의사 클래스는 문서의 특정 구조를 지정하는 데 사용됩니다.

선택기	인스턴스	설명	버전

🎜🎜:root🎜🎜:root🎜🎜는 문서의 루트 요소와 일치합니다🎜🎜3🎜🎜🎜:nth-child(n) 🎜 🎜:nth-child(n)🎜🎜상위 요소의 n번째 하위 요소와 일치🎜🎜3🎜🎜🎜:nth-last-child(n)🎜🎜 : nth-last-child(n)🎜🎜는 상위 클래스🎜🎜3🎜🎜🎜:nth-of-type(n)🎜🎜 하단에서 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 또는 양의 정수입니다. 표현식을 작성하는 방법은 각 하위 요소를 그룹으로 나누고 각 그룹의 b번째 요소를 취하는 것과 같습니다. 번호가 매겨진 하위 요소와 짝수 번호의 하위 요소를 쓸 수 있습니다. 표현식은 2n+1 또는 짝수, 2n 또는 홀수입니다.

🎜 부정 의사 클래스는 지정된 유형의 요소가 아닌 다른 모든 요소를 ​​선택하는 데 사용됩니다.

선택기	인스턴스	설명	버전

🎜🎜:not(s)🎜🎜input:not([type="text"])🎜🎜지정되지 않은 다른 모든 요소와 일치합니다. type🎜 🎜3🎜🎜🎜🎜🎜Pseudo-elements🎜🎜 Pseudo-elements는 문서 트리에 존재하지 않는 추상화를 참조합니다.

선택기	인스턴스	설명	버전

🎜🎜::first-line🎜🎜::first-line🎜🎜은 요소 텍스트 콘텐츠의 첫 번째 줄과 일치합니다🎜🎜1🎜🎜 🎜 ::first-letter🎜🎜::first-letter🎜🎜는 요소 텍스트 내용의 첫 글자와 일치합니다🎜🎜1🎜🎜🎜::before🎜🎜:: 이전🎜🎜요소 이전🎜🎜2.1🎜🎜<tr>🎜::after🎜🎜<code>::after🎜🎜요소 이전🎜🎜2.1🎜🎜🎜🎜

CSS 1과 CSS 2에서는 의사 클래스 선택자에 ":"가 하나만 있었지만 CSS 3에서는 의사 클래스와 의사 요소를 구별하기 위해 두 개의 "::"으로 변경되었습니다. 같은 효과가 있습니다. <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> 요소, 의사 클래스 요소이 4개 수준은 높은 우선순위에서 낮은 우선순위를 나타냅니다. !important는 해당 규칙을 가장 높은 가중치로 높이기 위해 CSS 규칙 뒤에 작성됩니다.
  <p>관련 추천:
  🎜css 선택기 예시 공유🎜🎜🎜🎜CSS 선택기의 새로운 사용법에 대한 자세한 설명🎜🎜🎜🎜CSS 선택기 필드 구문 분석 구현 방법🎜🎜

선택기	인스턴스	설명	버전

위 내용은 CSS 선택자의 우선순위 및 가중치 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!