CSS 선택기의 우선순위는 무엇입니까?

저희가 페이지를 작성할 때 이런 문제가 있지 않을까 싶습니다. 제가 추가한 스타일이 제가 주고 싶은 요소를 명확하게 선택했는데 스타일이 적용되지 않는 이유는 무엇인가요? 정의된 속성이 충돌할 때 브라우저는 어떤 스타일 세트를 사용하도록 선택합니까? 이 장에서는 CSS 선택자의 우선순위를 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 선택자의 우선순위

　1. ! important

　　속성 뒤에 이 스타일을 쓰면 페이지의 어느 곳에나 정의된 요소의 스타일이 재정의됩니다.

　2. 인라인 스타일, 스타일 속성에 적힌 스타일.

　 3. id 선택자

4. 클래스 선택자

5. 태그 선택자

6. 와일드카드 선택자

7. 브라우저의 사용자 정의 속성 및 상속

위에 적힌 정렬 순서는 우선 순위/가중치의 크기입니다. 크기 순서를 비교하기 위해 직접 시도해 볼 수 있습니다.

2. 다양한 상황에서 복잡한 선택자 우선순위, 하위 선택자 우선순위.

때때로 스타일을 작성할 때 여러 하위 스타일을 사용하게 되는데 우선순위 상황은 무엇인가요? 몇 가지 예를 살펴보겠습니다.

1. ID가 많은 쪽이 우선순위가 높습니다

#box .head span{
    color:blue;
}
.box .head span{
    color:red;
}<br data-filtered="filtered">//下面span标签的颜色是蓝色的
　　<div class="box" id="box">
　　　　<div class="head">
　　　　　　<span>我的颜色</span>
　　　　</div>
　　</div>

2. ID와 클래스의 개수는 동일하며, 요소 개수에 따라 개수가 많을수록 우선순위가 높아집니다.

//颜色应用的是第一个的样式，粉色<br data-filtered="filtered">#box .head p span{
　　color:deeppink;
}
#box .head span{
　　color:blue;
}
#box .head span{
　　color:red;
}
 
<div class="box" id="box">
　　<div class="head">
　　　　<p class="p"><span>我的颜色</span></p>
　　</div>
</div>

3. 우선순위는 동일하며 이후 스타일은 특정 순서 없이 선택기 유형 및 번호만 이전 스타일을 덮어씁니다.

//蓝色，优先级相同，后面的覆盖前面的，id、class、元素的个数不分先后顺序
#box .head p span{
    color:red;
}
#box div .p span{
    color:blue;
}
 
<div class="box" id="box">
    <div class="head" id="head">
        <p class="p" id="p"><span>我的颜色</span></p>
    </div>
</div>

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