[CSS] 스타일 우선순위

CSS의 스타일 우선순위

CSS의 스타일 우선순위는 다음과 같은 요인에 의해 결정된다:

1. !important: !important가 선언에 붙어 있는 경우, 그 스타일이 가장 높은 우선순위를 가진다. 단, 사용자 스타일시트의 !important는 제작자 스타일시트의 !important보다 높은 우선순위를 가진다.
2. 인라인 스타일(Inline Styles): HTML 요소의 style 속성에 직접 선언된 스타일이 있다면 그 스타일이 우선순위가 높다.
3. 특정성(Specificity): 선택자의 특정성이 높을수록 해당 스타일이 우선순위가 높다. 특정성은 ID 선택자, 클래스/속성/가상 클래스 선택자, 태그/가상 요소 선택자의 갯수에 따라 계산된다.
   • ID 선택자: 가장 높은 특정성을 가진다. (#id)
   • 클래스/속성/가상 클래스 선택자: 중간 정도의 특정성을 가진다. (.class, [attr], :hover)
   • 태그/가상 요소 선택자: 가장 낮은 특정성을 가진다. (div, p, ::before)
4. 소스 순서(Source Order): 동일한 특정성을 가진 두 스타일 규칙이 있다면, 마지막에 나오는 규칙이 적용된다.

• 예시

/* 특정성: 0, 1, 0 */
p {
  color: red;
}

/* 특정성: 0, 1, 1 */
div p {
  color: green;
}

/* 특정성: 0, 2, 0 */
.red-text {
  color: blue;
}

/* 특정성: 1, 0, 0 */
#content {
  color: yellow;
}

이러한 규칙에 따라, 특정 HTML 요소에 여러 스타일 규칙이 적용될 수 있을 때 어떤 규칙이 실제로 적용되는지를 결정한다.