반영훈/웹 개발
[CSS]우선순위 결정
Banda
2020. 6. 17. 16:27
같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법
1. 명시도 점수가 높은 선언 (명시도)
2. 점수가 같은경우, 가장 마지막에 해석되는 선언 (선언 순서)
3. 명시도는 '상속' 규칙보다 우선(중요도)
4. !important가 적용 된 선언방식이 다른 모든방식보다 우선(중요도)
!important > 명시도 점수가 같을 때 가장 마지막에 해석되는 선언 > 명시도 점수가 가장 높은 선언 > 상속
스타일 속성을 통한 인라인선언(1000 Point)[비추천/ 덮어쓰기 힘듦]
ex) <div style="color: red;">HELLO WORLD</div>
ID 선택자를 통한 선언(100pt) ... #Apple
Class 선택자를 통한 선언(10pt)... .Apple
단, 가상클래스 선택자 중 :not은 점수로 치지 아니한다.
Type(태그)선택자를 통한 선언(1pt)... Apple
Universal(전체)선택자를 통한 선언(0pt)... *
상속(CSS Inheritance)을 통한 선언(점수없음, 0보다낮음)