CSS의 선택기 우선순위에 대한 자세한 소개

특수점은 무엇입니까

HTML 요소에 CSS 스타일을 적용할 때 요소를 찾는 방법은 다음과 같이 여러 가지가 있습니다.

<p id="container" class="wrap_sty">   
    <p class="pra">这是一个段落</p>   
</p>   
<style>   
    #container p { color:red }   
    p p { color:green }   
    p { color:yellow }    
</style>

HTML 요소에 영향을 미치는 방법은 이보다 훨씬 많다는 것을 알 수 있습니다. 그러면 동일한 스타일이 요소에 많이 적용되면 최종적으로 어떤 스타일이 표시됩니까? CSS는 특정성이라는 방법을 사용하여 여러 선택기의 우선순위를 지정합니다.

CSS 특이성
선택기의 특이성은 왼쪽에서 오른쪽으로 a b c d의 4단계로 나뉘며, 선택기 규칙이 여러 개 있는 경우 왼쪽으로 갈수록 우선 순위가 높습니다. +1 동일한 유형의 선택기에 대한 것입니다.
HTML 내부 스타일인 경우 구체성이 우선합니다. a=1
id 선택자의 구체성은 b이고,
클래스 선택자, 의사 클래스 선택자, 속성 선택자는 c입니다.
레이블 선택기와 의사 요소 선택기는 d입니다.
먼저 몇 가지 선택기 유형에 대해 이야기해 보겠습니다.
1.id 선택기

#myid { ... }

2. 클래스 선택기

.myclass { ... }

3. 태그 선택기

p { ... }

4 . 속성 선택기

[title="mytitle"] { ... }

W3CSCHOOL 등 대부분의 문서에는 자세히 설명되어 있지 않기 때문에 많은 사람들이 속성 선택기가 p[title="mytitle " ] 또는 #id[title="mytitle"] 등은 엄밀히 말하면 순수 속성 선택자가 아니라 id 선택자, label 선택자 등을 조합하여 구성한 속성 선택자입니다.

5. 의사 클래스 선택기

p:hover { ... }

일반적인 의사 클래스 선택기는 다음과 같습니다.

링크 의사 클래스, :link, :visited, 사용 앵커 요소에.
모든 선택에 대한 동적 의사 클래스, :hover, :focus, :active.

6. 의사 요소 선택자

p::after { ... }   
p::before { ... }

의사 요소와 의사 클래스는 A이기 때문에 완전히 다른 개념입니다. 가상 HTML 요소는 생성될 수 있지만 의사 요소는 DOM에서 얻을 수 없습니다.

의사 요소에는 다양한 응용 프로그램이 있으며 가장 일반적인 응용 프로그램은 다음과 같습니다::수레를 지운 후:

<ul>   
    <li>A</li>   
    <li>B</li>   
</ul>   
<style>   
    li { float:left }   
    ul::after { content: ""; display: block; clear: both }   
</style>

CSS 특정 예
다음은 몇 가지입니다. 선택기 특정성의 CSS 예:

选择器	特殊性	以10为基数的特殊性
style="color: red"	1, 0, 0, 0	1000
#id {}	0, 1, 0, 0	100
#id #aid	0, 2, 0, 0	200
.sty {}	0, 0, 1, 0	10
.sty p[title=""] {}	0, 0, 2, 0	20
p:hover {}	0, 0, 1, 0	10
p {}	0, 0, 0, 1	1
ul::after {}	0, 0, 0, 1	1
p p {}	0, 0, 0, 2	2

두 규칙의 특정성이 동일한 경우 나중에 정의된 규칙이 먼저 정의된 규칙을 덮어씁니다.

CSS 중요성
CSS에는 특이성을 무시할 수 있는 또 다른 사항이 있습니다. 즉, 이 태그를 사용하는 CSS 속성이 항상 우선한다는 것입니다.

#id { color: red }   
.class { color: yellow !important }

id 선택자가 클래스 선택자보다 더 구체적이더라도 두 번째 스타일이 첫 번째 스타일보다 우선합니다.

두 속성 모두에 !important가 있으면 특이성에 따라 우선순위가 결정됩니다.

#id { color: red ！important }   
.class { color: yellow !important }

결과적으로 첫 번째 스타일이 두 번째 스타일보다 우선합니다.

IE6의 !important 지원은 완전하지 않습니다. IE6에서는 !important 속성이 선택기에서 먼저 정의되고 !important가 없는 동일한 속성이 나중에 정의되면 !important가 유효하지 않습니다.
아아아아

IE6에서는 노란색으로 할 방법이 없으니 핏물 좀 볼까요!

IE6/7에서는 맛을 잃지 않고 !important 뒤에 몇 가지 재료를 추가할 수도 있지만 너무 지루하지 않게 하는 것이 좋습니다!

아아아아

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