[CSS] CSS 우선순위

CSS 우선순위

우선순위란

같은 태그에 여러 CSS가 적용되었을 때, 어떤 선언의 CSS속성을 우선 적용할지 결정하는 방법입니다. 

1. 점수가 높은 선언이 우선됨.

2. 같은 점수일 경우, 가장 마지막에 해석된 선언이 우선됨.

 

아래의 코드에 CSS 우선순위 점수를 표시해 보겠습니다.

<div
	id="ColorRed"
    class="ColorOrange"
    style="color: yellow"  <!-- 인라인 선언 : 1000점 -->
>
    Nice!
</div>

div {color: white !important;}  /* !important : 최우선 적용 */
#ColorRed {color: red;}         /* ID선택자 : 100점 */
.ColorOrange { color: orange; }  /* Class선택자 : 10점 */
div { color: green;}             /* 태그 선택자 : 1점 */
* { color : blue }               /* 전체 선택자 0점 */

결과적으로 'Nice!' 는 하얀색이 됩니다. 

 

그러면 점수계산에 대한 예시를 알아보겠습니다. 

.class1 h1.class2 { color : red; }   /* 10 + 1 + 10 = 21 */
.Iclass::before { content: "good" ; color : red; }  /* 10 + 1 = 11 (요소는 태그와 비슷함) */
header .bar li:nth-child(2) { color:red; } /* 1 + 10 + 1 + 10 = 22 */

 

인라인 스타일은 우선순위 점수가 너무 높기에 수정이 힘들기에 사용을 자제해야 합니다. 

! important 또한 우선순위가 너무 높기에 수정이 어려워 지기에 사용을 자제해야 좋습니다.