계층적 메뉴에서 CSS 상속을 방지하는 방법은 무엇입니까?

계층 메뉴에서 CSS 상속 방지

CSS에서 상속이란 상위 요소에서 하위 요소로 스타일이 전달되는 것을 의미합니다. 상속은 일반적으로 바람직하지만 중첩된 계층 구조의 특정 수준에 대한 스타일을 수정하려는 경우 문제가 될 수 있습니다. 이러한 시나리오 중 하나는 하위 항목에 영향을 주지 않고 최상위 항목에 사용자 정의 스타일이 필요한 계층적 탐색 메뉴에서 발생합니다.

하위 선택기 사용

상속을 방지하는 한 가지 접근 방식은 다음과 같습니다. 하위 선택자(>)를 사용합니다. 다음 CSS 규칙은 #sidebar ul 요소의 직계 하위 요소만 대상으로 합니다.

#sidebar > ul li {
  /* styles that will not be inherited by sub-list items */
}

그러나 이 방법은 여러 수준의 중첩 목록이 있는 경우 적합하지 않을 수 있습니다.

특정 클래스 사용

대체 솔루션은 최상위 목록 항목에 특정 클래스를 사용하는 것입니다. 다음 HTML에서 각 최상위 목록 항목에는 "top-level-nav" 클래스가 있습니다.

<ul>

그런 다음 다음 CSS를 사용하여 최상위 항목을 타겟팅할 수 있습니다.

#sidebar .top-level-nav {
  /* styles that will not be inherited */
}

이 방법을 사용하면 .top-level-nav 클래스에 적용된 스타일이 하위 항목으로 전달되지 않습니다. 미리 만들어진 테마에 하위 목록 항목에 대한 특정 스타일이 포함된 경우 해당 스타일을 재정의해야 합니다. 이는 #sidebar .top-level-nav의 스타일을 더 구체적으로 선언하거나 추가 선택기를 사용하여 수행할 수 있습니다.

위 내용은 계층적 메뉴에서 CSS 상속을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!