중첩된 CSS 선택기에서 첫 번째 하위 요소를 제외한 모든 요소의 스타일을 지정하는 방법은 무엇입니까?

중첩 선택기로 작업: not:first-child 사용

중첩 구조 내에서 특정 요소를 선택하는 것은 CSS에서 어려울 수 있습니다. 그룹의 첫 번째 요소를 제외한 모든 요소에 스타일을 적용해야 하는 시나리오에 직면하면 not:first-child 선택기가 작동합니다.

시도한 접근 방식 중 하나는 div ul:not:first-입니다. 아이, 불행히도 작동하지 않습니다. 이는 not:first-child 선택기가 인수로 간단한 선택기를 기대하기 때문입니다. 이는 div ul이 이 컨텍스트에서 유효하지 않음을 의미합니다.

not:first-child 선택기의 올바른 구문은 다음과 같습니다.

div ul:not(:first-child) {
    background-color: #900;
}

이 선택기는 상위 div의 첫 번째 하위 요소가 아닌 모든 ul 요소를 대상으로 합니다.

그러나 레거시 브라우저 지원 또는 :not 선택기의 제한 사항을 해결하려면 대체 기술을 사용할 수 있습니다.

1. 의도한 것보다 더 넓은 범위의 규칙을 정의하여 모든 요소에 원하는 스타일을 할당합니다.
2. 만들기 더 좁은 범위의 더 구체적인 규칙.
3. 더 좁은 규칙에서는 첫 번째와 같은 특정 조건을 충족하는 요소에 대해 스타일 속성을 기본값으로 재설정합니다. child.

예를 들어 이 코드 조각에서는 모든 ul 요소에 배경색을 적용하지만 두 번째 규칙은 첫 번째 하위 요소의 스타일을 재정의합니다.

div ul {
    background-color: #900;
}

div ul:first-child {
    background-color: transparent;
}

not:first-child 선택기 또는 대체 기술을 사용하면 첫 번째 하위 항목에 영향을 주지 않고 중첩된 요소를 효과적으로 대상으로 지정하고 스타일을 지정할 수 있습니다.

위 내용은 중첩된 CSS 선택기에서 첫 번째 하위 요소를 제외한 모든 요소의 스타일을 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!