CSS 적용 순서

1. 완전 똑같은 선택자가 나중에 또 나오면, 이전에 나온 스타일을 덮어쓰게 된다.

 

<h1>나중에 나온 것으로 덮어씌워줘</h1>

h1 {
  color: blue;
  text-align: center;
}

h1 {
  color: green;
}

원래는 가운데 정렬에 파란색으로 표시하라고 했지만 나중에 초록색으로 바꿨다. 

얘는 결국 가운데 정렬에 초록색으로 나온다.

 

2. 명시도(specificity) : 같은 요소를 가리키지만 선택자가 다르다면, 명시도에 따라 우선 순위가 결정된다.

 

명시도 계산 방법

 1) 인라인 스타일이 가장 우선 순위가 높다.

 2) 선택자에 id가 많을 수록 우선 순위가 높다.

 3) 선택자에 class, attribute, pseudo-class가 많을 수록 우선 순위가 높다.

 4) 그 다음은 그냥 요소(또는 가상 요소)가 많은 순서다.