CSS 선택기 우선 순위에 대한 깊은 이해

CSS에는 클래스 선택자, 태그 선택자, ID 선택자 등 다양한 선택자가 있습니다. 오늘은 CSS 선택자의 우선순위와 사용법에 대해 말씀드리겠습니다. !중요합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 중요는 가장 높은 우선순위를 의미합니다. IE6 브라우저는 !important 를 인식하지 못합니다.

예:

일반적으로 아래에 작성된 스타일이 위의 스타일보다 우선순위가 높습니다.

demo1{
color:red;
color:green; /*绿色的优先级高于红色，所有浏览器都会显示绿色*/
}

!important를 추가하면 IE6의 우선순위가 더 높아집니다.

demo2 {
color:red !important; /*除了ie6，其他浏览器会认为红色优先级高，显示红色字体*/
color:green; /*ie6浏览器则顺序读取css所以显示绿色*/
}

하지만 ie6이 !important의 우선순위를 인식하지 못한다는 점에 유의하세요. 그렇다고 ie6가 !important가 포함된 스타일 속성을 인식하지 못한다는 의미는 아닙니다.

demo3{
color:red;
color:green !important; /*包括ie6，所有浏览器都显示绿色字体，ie6只是不认识优先级罢了*/
}

2. CSS(Cascading Style Sheets) 계단식 스타일 시트에는 일반적으로 세 가지 계단식 방법이 있습니다.

우선순위: 인라인 스타일 시트(태그 내부) > 내장 스타일 시트(현재 파일) > 외부 스타일 시트(외부 파일)

1. 외부 스타일(여러 웹페이지에 적용)

외부 스타일 시트에는 CSS 코드가 별도의 파일로 저장됩니다. 예를 들어 style.css 파일에는 모든 스타일이 포함되어 있습니다. HTML의 외부 계단식은 2cdf5bf648cf2f33323966d7f58a7f3f 태그 또는 @import 문을 사용하여 도입됩니다.

샘플 코드는 다음과 같습니다.

<link rel="stylesheet" href="style.css" type="text/css" /> //link 链接
@import url("style.css"); //@import 导入

2cdf5bf648cf2f33323966d7f58a7f3f @import와 @import의 유사점과 차이점은 해당 기사

2에서 확인할 수 있습니다. 인라인(현재 페이지에 적용)

CSS 코드 포털 웹사이트는 일반적으로 내장되어 있으며, 이는 일반적으로 인라인 스타일로 알려져 있으며 c9ccee2e6ea535a969eb3f532ad9fe89 태그를 사용하여 스타일을 내부 블록 개체로 정의합니다.

샘플 코드는 다음과 같습니다.

<style type="text/css">
    body{font-family:Arial,Helvetica,sans-serif;}
</style>

인라인 CSS는 HTTP 요청을 효과적으로 줄이고, 페이지 성능을 향상시키며, 서버 부담을 완화할 수 있습니다. 브라우저는 CSS를 로드한 후에만 페이지를 렌더링할 수 있으므로 CSS 파일을 읽지 못하고 페이지가 알몸으로 실행되는 것을 방지할 수 있습니다.

3. Embedded (특정 태그에 적용)

CSS를 작성하는 가장 기본적인 방법은 수정된 마크업 요소에 직접 코드를 추가하는 것입니다.

샘플 코드는 다음과 같습니다.

<div style="font-family:Arial,Helvetica,sans-serif;">饿了么</div>

이것이 더 직관적이기는 하지만 페이지 크기가 크게 늘어나고 구조와 성능의 분리라는 디자인 아이디어에 부합하지 않습니다.

3. 가중치가 다른 경우 브라우저는 가중치에 따라 사용할 선택기 CSS 스타일을 결정합니다.

가중치 규칙: 라벨(P,span)의 가중치는 1, 클래스 선택자의 가중치는 10, id 선택자의 가중치는 최대 100입니다.

예:

div {color: red;} /*태그, 가중치는 1*/

div 범위 {color: green;} /*두 개의 라벨, 가중치는 1+1=2*/

div> span {color: purple;} /*가중치는 위와 동일하므로 근접성 원칙을 채택합니다*/

.main {color: white;} /*클래스 선택자, 가중치는 10*/

divspan .warning {color: purple;} /* 가중치는 1+1+10=12*/

#main .con p {color: yellow;} /* 가중치는 100+10+1=111*/

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