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 중국어 웹사이트의 기타 관련 기사를 참조하세요!