<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> 目标伪类指定当前活动的锚，使用目标伪类可以为活动的锚设置样式。
选择器
实 例
描 述
版 本
:target
#tab1:target
모든 요소 일치
2.1
E
🎜태그 선택기(유형 선택기)🎜🎜p🎜🎜모두 일치 <p>🎜 🎜1🎜🎜🎜🎜.class🎜🎜 클래스 선택기 🎜🎜.nav🎜🎜는 class="nav" 🎜🎜1🎜 🎜🎜🎜#id🎜🎜ID 선택기 🎜🎜#가 있는 모든 요소와 일치합니다. 래퍼🎜🎜는 id="wrapper"🎜🎜1🎜🎜🎜🎜 E[attr]🎜🎜속성 선택기🎜🎜a[data-url]🎜🎜모든 <code>data-url 속성의 <a>와 일치 ; 요소 🎜🎜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 🎜🎜 모든 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 🎜🎜🎜🎜
: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）是指不存在与文档树中的抽象。
选择器
实 例
描 述
版 本
::first-line
::first-line
匹配元素文本内容的首行
1
::first-letter
::first-letter
匹配元素文本内容的首个字母
1
::before
::before
元素之前
2.1
::after
::after
:lang(val)
#p:lang(en)
은 지정된 lange="en" code>과 일치합니다. 의 <p> 요소
3
🎜🎜🎜🎜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🎜🎜
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
