반영훈/웹 개발

[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보다낮음)