🎨 CSS 중첩 규칙과 선택자 우선순위 이해 및 활용

## 개요
CSS 중첩은 스타일을 더 깊이 구조화하여 코드의 가독성과 유지보수성을 높이는 기법입니다. 선택자 우선순위는 특정 요소에 스타일을 적용할 때 브라우저가 어떤 규칙을 선택할지를 결정합니다.

## 주요 특징
- 중첩은 `@layer` 또는 자식 선택자를 통해 구현 가능
- 선택자 우선순위는 인터섹션, 유니버설, 조합 등에 따라 달라짐
- 브라우저는 가장 높은 우선순위를 가진 규칙을 적용함

## 사용법
```css
/* 기본 중첩 예제 */
.container {
color: blue;
}

.container .title {
font-size: 24px;
}

/* 선택자 우선순위 예시 */
#main .nav {
background-color: red;
}

.nav {
background-color: green;
}
```

브라우저는 `#main .nav`가 `.nav`보다 우선순위가 높기 때문에 빨간 배경을 적용합니다.

## 주의사항
- 중첩이 너무 깊어지면 코드가 복잡해질 수 있음
- 선택자 우선순위가 낮은 규칙에 `!important`를 사용하지 않도록 하세요
- CSS 인라인 스타일은 다른 모든 규칙보다 우선순위가 높습니다.

## 관련 문법
- CSS 조합자(Combinator)
- CSS 유니버설 선택자(Universal Selector)
- !important 키워드

.parent {
  color: blue;
}

.parent .child {
  font-size: 20px;
}

/* 우선순위 예시 */
#main .nav {
  background-color: red;
}

.nav {
  background-color: green;
}