CSS는 특정 섹션에만 규칙을 적용합니다.

Question

"a"태그에 스타일 규칙을 적용하는 동안 CSS를 배우고 있고 문제가 있습니다. 링크가 포함 된 목록 항목이 포함 된 정렬되지 않은 목록이 포함 된 탐색이 있습니다. "li"태그 위로 마우스를 가져 가면 "a"태그 안의 텍스트 색상을 변경하고 싶습니다. 아래는 CSS 규칙을 적용하기 위해 추가 한 코드입니다.

#top-nav ul >li:hover a{ 
color: #FFFFFF; 
} 

하지만이 규칙은 페이지의 모든 링크에 적용됩니다. 이 규칙이 # top-nav ul> li 내의 모든 직접 링크에 적용되고 # top-nav ul> li 아래의 모든 하위 요소에 적용되지 않도록하려면 어떻게해야합니까?

현재 위의 규칙은 #top -nav ul> li 및 li 요소 li 태그 아래의 div 태그 깊숙한 곳

Answer 1

호버 후 직접 자손 선택 도구를 추가합니다.

#top-nav ul > li:hover > a