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를 활용하시는것이 좋습니다
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인