> 웹 프론트엔드 > CSS 튜토리얼 > CSS 선택기 우선 순위에 대한 깊은 이해

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

yulia
풀어 주다: 2018-09-18 15:03:31
원래의
2516명이 탐색했습니다.

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의 외부 계단식은 태그 또는 @import 문을 사용하여 도입됩니다.

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

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

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

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

CSS 코드 포털 웹사이트는 일반적으로 내장되어 있으며, 이는 일반적으로 인라인 스타일로 알려져 있으며