선택자 우선순위
1순위: !important
2순위: inline 스타일 속성
3순위: 아이디
4순위: 클래스
5순위: 요소 선택지
6순위: 전체 선택지
- 같은 태그에 대한 css : 순서상 나중이 우선
- 특정 태그 vs * (전체): 특정 태그 우선
- 특정 태그 vs 같은 부분 가르키는 class: class가 우선
- 같은 class: 순서상 나중이 우선
- 그냥 class vs 특정 태그의 class: 특정 태그의 class 우선
ex) .guess vs h1.guess -> 후자가 더욱 구체적임 - 같은 태그의 class: 순서상 나중이 우선
- class 두개 이상이면 더 많이 적은 부분이 우선
- id vs class : id가 이긴다!
- !important가 최강의 챔피언
더 구체적으로 가르키는 것이 우선시됨!
- html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1 id="guess" class="guess">Rainbow</h1>
<ul class="rainbow">
</body>
</html>- css - 여기 코드들을 일부 지우면서 비교해보면 금방 이해할 수 이따!
.guess {
background: blue !important;
}
.guess {
background: purple;
}
/* class는 *.guess로 *.이 생략된 형태이다!! */
h1 {
background: blue;
}
h1 {
background: orange;
}
#guess {
background: yellow;
}
h1.guess {
background: dodgerblue;
}
* {
background: aqua;
}
똘멩이