>웹 프론트엔드 >CSS 튜토리얼 >CSS를 사용하여 첫 번째 하위 요소를 제외한 모든 요소의 스타일을 어떻게 지정할 수 있습니까?

CSS를 사용하여 첫 번째 하위 요소를 제외한 모든 요소의 스타일을 어떻게 지정할 수 있습니까?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-12-10 18:42:11279검색

How Can I Style All But the First Child Element Using CSS?

첫 번째 요소를 제외한 스타일 요소: CSS "not:first-child" 선택기 탐색

CSS 스타일링에서 "not:first" -child" 선택기를 사용하면 특정 계층 구조의 첫 번째 요소를 제외한 모든 요소를 ​​타겟팅할 수 있습니다. 간단해 보이지만 특정 시나리오에 이 선택기를 적용하는 것은 어려울 수 있습니다.

첫 번째가 아닌 요소에 CSS 적용

"div"가 있는 시나리오를 고려해 보겠습니다. " 태그에는 여러 개의 "ul" 태그가 포함되어 있습니다. 첫 번째 태그를 제외한 각 "ul" 태그에 대해 CSS 속성을 설정하려면 div ul:not(:first-child) 코드가 작동해야 합니다. 그러나 실패할 경우 다음과 같은 몇 가지 이유가 있습니다.

  • 브라우저 지원: "not:first-child" 선택기는 최신 브라우저에서 지원되지만 호환되지 않을 수 있습니다. 레거시 브라우저.
  • 선택기 구문: 앞에 콜론(:)을 사용하여 선택기 구문이 올바른지 확인하세요. "first-child" 설명자.

대체 접근 방식

"not:first-child"가 실행 가능하지 않은 경우 대체 접근 방식은 먼저 적용하는 것입니다. 모든 요소에 스타일을 적용한 다음 첫 번째 요소에 대해 스타일을 "취소"합니다. 예:

div ul {
    background-color: #900;
}

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

이 예에서 첫 번째 규칙은 모든 "ul" 요소에 적용되는 반면, 두 번째 규칙은 첫 번째 요소의 배경색을 구체적으로 재정의합니다.

범위 및 기본값 제한

이 대체 접근 방식을 사용하여 범위를 제한하는 경우 취소된 CSS 속성을 기본값으로 설정하세요. 값. 이렇게 하면 첫 번째 요소에 대해서만 원래 스타일이 재정의됩니다.

위 내용은 CSS를 사용하여 첫 번째 하위 요소를 제외한 모든 요소의 스타일을 어떻게 지정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.