css 머리가 터져버릴거 같습니다 ㅠㅠ
본문
드랍다운 메뉴를 만드는중에
<ul>
<li>
<a href="">메뉴1</a>
<ul>
<li><a href="">메뉴1-1</a></li>
<li><a href="">메뉴1-2</a></li>
</li>
<li><a href="">메뉴2</a></li>
<li><a href="">메뉴3</a></li>
</ul>
이렇게 하고 css 에서
ul > li {font-size:20px;}
이렇게 하면 대메뉴의 메뉴1,메뉴2,메뉴3만 폰트가 20이 되야 하는거 아닌가요??
그 하위 li 까지 같이 효과를 먹는데 이해가 안갑니다 ㅠㅠ
유튜브나 책을 다시 봐도 ul > li 이렇게 선택하면 자식요소만 변경 된다고 하는데
그 아래까지 변해버리니.... 왜그런지
답변 2
<ul>
<li>
<a href="">메뉴1</a>
<ul>
<li><a href="">메뉴1-1</a></li>
<li><a href="">메뉴1-2</a></li>
</li>
<li><a href="">메뉴2</a></li>
<li><a href="">메뉴3</a></li>
</ul>
위에 마크업에 아무런 class 도 id도 없다면 위에 표시한 부분은 같은 조건이기때문에 당연히 말씀하신대로 css가 동일시하게 적용됩니다
==== 수정 =======
<ul class="depth1">
<li>
<a href="">메뉴1</a>
<ul class="depth2">
<li><a href="">메뉴1-1</a></li>
<li><a href="">메뉴1-2</a></li>
</li>
<li><a href="">메뉴2</a></li>
<li><a href="">메뉴3</a></li>
</ul>
ul.depth1 > li{ font-size:20px}
이렇게 되어야 첫번째 ul의 하위 직계 자식인 li에게만 css가 적용됩니다
추가적으로 공통적으로 쓰는 요소에게는 id보다 class를 활용하시는것이 좋습니다
