최상위 항목의 스타일을 지정하는 동안 중첩 메뉴에서 CSS 상속을 방지하는 방법은 무엇입니까?

중첩 메뉴에서 CSS 상속 방지

계층 메뉴에서는 상위 요소에서 상속된 스타일이 문제가 될 수 있습니다. 이 문서에서는 중첩된 탐색 메뉴에서 CSS 상속을 방지하여 최상위 항목에만 특정 스타일이 지정되도록 하는 문제를 다룹니다.

제공된 HTML 구조는 계층 구조의 중첩 목록을 활용합니다. 중첩된 하위 항목에 영향을 주지 않고 최상위 목록 항목("top-level-nav" 클래스의 "li")에 스타일을 적용하는 방법에 대한 질문이 생깁니다.

하위 선택기 사용

한 가지 접근 방식은 하위 선택자를 사용하는 것입니다. (">"):

#parent > child

이 시나리오에서는 다음과 같습니다.

#sidebar > .top-level-nav

이렇게 하면 스타일이 "#sidebar" 요소의 직계 자손에만 적용됩니다. , 최상위 탐색 항목만 효과적으로 타겟팅합니다. 특히 Internet Explorer 6은 하위 선택기를 지원하지 않습니다.

여러 하위 선택기 활용

또는 여러 하위 선택기를 사용하여 특정 깊이의 요소에 대한 스타일을 지정할 수 있습니다. :

#parent child child

예:

#sidebar child child

"#sidebar" 내에서 두 수준 깊이에 있는 요소를 대상으로 합니다.

코드 중복 방지

중복을 방지하려면 하위 항목에 대한 스타일을 적용하려면 기존 "#sidebar ul li" 규칙을 수정하여 모든 중첩 목록 항목에 적용할 수 있습니다. 최상위 항목의 경우 위에서 언급한 하위 선택기를 사용하여 타겟팅할 수 있습니다.

위 내용은 최상위 항목의 스타일을 지정하는 동안 중첩 메뉴에서 CSS 상속을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!