CSS를 사용하여 중첩 요소에 영향을 주지 않고 계층적 탐색 메뉴의 스타일을 어떻게 지정할 수 있습니까?

계층적 탐색에서 CSS 상속 극복

탐색 메뉴와 같은 계층적 구조로 작업할 때 중첩된 요소에 영향을 주지 않고 특정 수준에서 스타일을 사용자 정의하는 것이 어려울 수 있습니다. 이 문서에서는 이러한 시나리오, 특히 사이드바 탐색 메뉴에서 CSS 상속을 방지하는 솔루션을 살펴봅니다.

다음 HTML 구조를 고려하세요.

이 예에는 다음과 같은 사전 정의된 테마가 있습니다. ul 및 li 태그 모두에 대한 기본 스타일을 설정합니다. 그러나 사용자는 하위 항목에 영향을 주지 않고 최상위 목록 항목을 수정하려고 합니다.

이를 달성하기 위해 하위 선택기를 활용할 수 있습니다.

#parent > child

이 선택기를 사용하면, 스타일은 중첩된 요소를 제외하고 첫 번째 수준 하위 항목에 구체적으로 적용될 수 있습니다. 예를 들면 다음과 같습니다.

#sidebar > .top-level-nav {
  /* Styles that will only apply to top-level list items */
}

대체 솔루션은 보다 구체적인 선택기를 사용하는 것입니다.

#parent child child

이 선택기는 상위 요소보다 한 수준 이상 아래에 있는 요소에 스타일을 적용합니다. 예:

#sidebar ul li child child {
  /* Styles that will only apply to elements that are three levels below the #sidebar element */
}

이러한 기술을 사용하면 중첩된 하위 항목에 영향을 주지 않고 특정 요소의 대상 스타일을 지정할 수 있습니다. 그러나 Internet Explorer 6에서는 하위 선택기를 지원하지 않으므로 이러한 시나리오에서는 대체 솔루션을 사용해야 할 수도 있습니다.

위 내용은 CSS를 사용하여 중첩 요소에 영향을 주지 않고 계층적 탐색 메뉴의 스타일을 어떻게 지정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!