CSS SELECTOR(선택자) 우선순위
CSS SELECTOR(선택자) 우선순위
!important > 인라인 스타일 > 아이디 선택자 > 클래스/속성/가상 선택자 > 태그 선택자 > 전체 선택자(*)
경쟁 규칙이 같은 선택자 그룹에 속해 있다면 선택자의 종류와 수에 따라 우선순위가 결정된다.
즉 높은 우선순위의 선택자를 더 많이 사용한 규칙이 이긴다.
삽입 위치 우선순위
1. <head> 요소안의 style 요소
2. <style> 요소안의 @import 문
3. <link> 요소로 연결된 CSS 파일
4. <link> 요소로 연결한 CSS 파일 안의 @import 문
5. 최종 사용자가 연결한 CSS 파일
6. 브라우저의 기본 스타일시트
7. 예외적으로, 최종 사용자가 연결한 CSS 파일 안의 !important 규칙은 우선순위 1위다.
8. 최종 사용자는 !important 규칙을 작성해서 웹사이트 디자이너가 만든 CSS 파일의 규칙을 무효화할 수 있다.
여러 CSS파일이 같은 우선순위 위치에서 연결되고 삽입되어 있을 때는 연결/삽입 순서에 따라 우선 순위가 결정된다.
가장 마지막에 연결/삽입된 스타일시트가 앞의 스타일시트보다 우선순위가 높다.
@charset "utf-8";
/* 전체 선택자 */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* 요소 선택자 */
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display:block;
}
/* 클래스 선택자, 속성 선택자, 가상 선택자 */
.pull-left {
float: left
}
.ab[title="abcd"] {
position: absolute;
}
/* 아이디 선택자 */
#content {
position: relative;
}
/* !important 전체 선택자 */
...
/* !important 요소 선택자 */
...
/* !important 클래스 선택자, 속성 선택자, 가상 선택자 */
...
/* !important 아이디 선택자 */
댓글
댓글 쓰기