우선순위 결정 이란?

우선순위에는 ‘중요도, 명시도, 선언순서’의 개념이 있습니다. 각 개념이 의미하는 것을 기억하세요. 

 

같은 요소가 여러 선언의 대상이 될 경우,

어떤 선언의 CSS 속성(property)을 우선 적용할지 결정하는 방법

 

1. 명시도 점수가 높은 선언이 우선 (명시도)
2. 점수가 같은 경우, 가장 마지막에 해석(늦게 작성한) 되는 선언이 우선 (선언 순서)
3. 명시도는 ‘상속’ 규칙보다 우선 (중요도)
4. !important가 적용된 선언 방식이 다른 모든 방식보다 우선 (중요도) 

 

1. 가장 중요 (!importtant)

모든 선언을 무시하고 가장 우선 

점수 : 가장 우선 무한대 

 

 

1. 인라인 선언 방식 (Style Attribute)

인라인 선언(HTML style 속성을 사용)

점수 : 1000pt

 

인라인 방식으로 선언시 쓸데없이 점수가 너무 높다 

• 예시 : <div style= “color: orange;”> HELLO WORLD </div> 

 

 

1. 아이디 (ID Selector) 

아이디 선택자 

점수 : 100pt 

• 예시 : #color_yellow {
•   Color: yellow;
• }

id와 같이 고유한 방식일수록 점수가 높다 

 

1. 클래스 (Class Selector) 

클래스 선택자 

점수 : 10pt

• 예시 : .color_green {
•   Color: green;
• }

 

1. 태그 선택자 (Type Selector)

태그 선택자 

점수 : 1pt

• 예시: span {
•   Color: blue;
• }

 

1. 전체 (Universal Selector) 

전체 선택자 

점수: 0pt

  * { 

      Color: darkblue;

}

 

1. 상속 (CSS Inheritance) 

상속 받은 속성은 항상 우선하지 않음

점수 : 계산하지 않음 

• 예시 : Body {
•           Color: violet;
• }

상속은 우선 하지 않는다. 

0점보다 더 낮은 점수이다 

 

 

가상 요소 :: = 태그 

 

부정선택자 :not은 점수로 계산하지 않는다 

 

:hover 처럼 ‘가상 클래스’는 ‘클래스’ 선택자의 점수 (10pt)를 가지며, 

::before 처럼 ‘가상 요소’는 ‘태그’ 선택자의 점수 (1pt)를 가집니다.

부정선택자 :not()은 점수를 가지지 않습니다.