[TIL]CSS 선택자 우선순위

CSS 선택자 우선 순위

CSS 선택자 우선순위는 CSS 규칙의 적용 우선순위를 결정하는 방법입니다. CSS 규칙은 여러 개의 선택자와 스타일 선언으로 이루어져 있으며, 이 중 어떤 규칙이 우선적으로 적용될지는 다음과 같은 기준에 따라 결정됩니다.

1. 중요도 (Importance): !important 규칙은 다른 모든 규칙보다 우선합니다.

2. 인라인 스타일 (Inline Styles): HTML 요소에 직접 적용된 스타일은 다른 모든 규칙보다 우선합니다.

3. 아이디 선택자 (ID Selectors): ID 선택자에 의해 스타일이 적용되는 요소는 다른 모든 선택자보다 우선합니다.

4. 클래스 선택자 (Class Selectors) 및 속성 선택자(Attribute Selectors): 클래스 선택자와 속성 선택자는 태그 선택자보다 우선합니다.

5. 태그 선택자 (Tag Selectors): 태그 선택자에 의해 스타일이 적용되는 요소는 다른 모든 선택자보다 낮은 우선순위를 가집니다.

6. 전체 선택자 (Universal Selector): 전체 선택자는 다른 모든 선택자보다 낮은 우선순위를 가집니다.

우선순위가 같은 경우에는 나중에 선언된 규칙이 우선합니다. 따라서 같은 선택자에 대해 뒤에 나온 스타일이 우선적으로 적용됩니다.

위와 같은 우선순위 규칙을 이용하여 CSS를 작성하면, 스타일이 일관되고 예측 가능한 방식으로 적용됩니다. 그러나 우선순위가 높은 규칙을 남용하거나 중복되는 규칙을 작성할 경우, 코드의 복잡도가 증가하고 유지 보수성이 낮아질 수 있으므로 주의해야 합니다.