CSS - 우선순위

1. 계단식

동일한 요소에 여러 개의 css를 적용한 경우, 계단식으로 스타일이 정의됩니다.
예컨대 h1 요소를 빨강색으로 css를 적용하고 그 하단에 h1 요소를 노란색으로
정의한 경우, 노란색으로 덮어 씌워지게 됩니다.

또한, 여러 개의 스타일 시트에 h1 요소의 색상을 정의한 경우에는, 가장 하단에 위치한
스타일 시트의 css가 적용 됩니다.

h1,
h2 {
    color: #ffb5a7;
}

/* 하단에 위치한 css가 적용 됩니다 */
h1,
h2 {
    color: red;
}

2. 우선 순위

CSS 에서는 동일한 요소에 여러 개의 CSS가 정의되는 경우 우선순위가 높은 선택자에
따라서 CSS가 정의 됩니다.

만약 요소 하나에 동일한 우선순위의 css를 정의한다면, 조금 더 구체적인 css가 적용
될 것입니다.

2.1 우선 순위 계산 법

css는 요소 하나의 동일한 css를 적용할 경우 충돌을 방지하기 위해서, 우선 순위가 높은
css를 적용하게 됩니다. 이 때 수학적인 계산을 통해서 연산하게 되는데 구체적인 css인
경우 우선순위 값이 높게 측정 됩니다.

우선순위 계산 사이트

/* 우선 순위 값 : 100 */
#happy {
    color: blue;
}


/* 우선 순위 값 : 11 */
.post h2 {
    color: red;
}


/* 우선 순위 값 : 1 */
h2 {
    color: #ffb5a7;
}


/* 우선 순위 값 : 2 */
h1 + h2 {
    color: #ffb5a7;
}

우선 순위 값은 총 3자리로 구성되어 있으며, ID는 100의 자리, Class는 10의자리,
요소의 자리는 1의 자리입니다.

하단의 코드를 보면 동일한 요소 선택자이지만, 조금 더 구체적인 h1 + h2 선택자가
우선순위가 높아 css가 적용될 것입니다.

우선 순위 값은 동일한 선택자간에서만 서열이 정해집니다.

예를 들어 요소 선택자의 점수가 11점이며, class 선택자의 점수가 10점인경우
class 선택자의 우선순위가 더 높습니다.