선택자 우선순위

CSS에서 선택자 우선순위는

스타일이 어떻게 적용될지를 결정하는 중요한 개념입니다.

선택자의 우선순위는 다음과 같은 규칙에 따라 결정됩니다:

1.  인라인 스타일: 요소에 직접 적용된 스타일로,

                             가장 높은 우선순위를 가집니다.

                             예: <div style="color: red;">

2.  ID 선택자: #로 시작하는 선택자로,

                     인라인 스타일 다음으로 우선순위가 높습니다.

                     예: #header { color: blue; }.

3. 클래스, 속성, 가상 클래스 선택자: .로 시작하는 클래스 선택자와

                                                           [attribute], :hover와 같은 가상 클래스 선택자는

                                                           ID 선택자보다 낮은 우선순위를 가집니다.

                                                           예: .menu { color: green; }

4. 태그 선택자: HTML 태그 이름을 기준으로 선택하는 것이며,

                        클래스 및 ID 선택자보다 우선순위가 낮습니다.

                        예: p { color: black; }

5. 유니버설 선택자 및 자식 선택자: *와 같은 유니버설 선택자,

                                                          그리고 >로 시작하는 자식 선택자는

                                                          가장 낮은 우선순위를 가집니다.

                                                          예: div > p { color: orange; }

6. 상속: 부모 요소의 스타일이 자식 요소에 영향을 미치는 경우도 있으며,

             이는 우선순위와는 다른 개념입니다.

우선순위 계산 예시

• style="color: red;" (인라인) → 가장 높음
• #header (ID 선택자) → 두 번째
• .menu (클래스 선택자) → 세 번째
• p (태그 선택자) → 네 번째

이러한 규칙에 따라 CSS 스타일이 적용되며,

같은 요소에 여러 스타일이 적용될 경우

가장 높은 우선순위를 가진 스타일이 적용됩니다.