>웹 프론트엔드 >CSS 튜토리얼 >CSS의 `:not(:first-child)` 선택기를 사용하여 시리즈의 첫 번째 요소를 제외한 모든 요소의 스타일을 지정하려면 어떻게 해야 합니까?

CSS의 `:not(:first-child)` 선택기를 사용하여 시리즈의 첫 번째 요소를 제외한 모든 요소의 스타일을 지정하려면 어떻게 해야 합니까?

Susan Sarandon
Susan Sarandon원래의
2024-12-02 12:55:13181검색

How Can I Style All but the First Element in a Series Using CSS's `:not(:first-child)` Selector?

CSS 숙달을 위한 not:first-child 선택기 익히기

질문:

모든 요소를 ​​효과적으로 타겟팅하는 방법 CSS의 not:first-child 선택기를 사용하는 일련의 요소 중 첫 번째 요소를 제외하고? 이러한 분리는 첫 번째 항목을 제외하면서 특정 요소의 스타일을 지정하려고 할 때 문제를 야기합니다.

답변:

이러한 분리를 달성하려면 두 가지 실행 가능한 접근 방식이 있습니다.

1. :not Selector 활용(최신 브라우저):

CSS 선택기 레벨 3을 지원하는 최신 브라우저의 경우 다음 선택기는 첫 번째 요소를 제외한 모든 요소를 ​​정확하게 타겟팅합니다.

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

2. 조건부 범위 취소:

레거시 브라우저 또는 :not 선택기가 제한되는 특정 시나리오의 경우 다음 기술을 사용할 수 있습니다.

  1. 처음에 적용되는 규칙을 설정합니다. 원하는 유형의 모든 요소(예:
    ):
div ul {
    background-color: #900;
}
  1. 첫 번째 요소에서 이 스타일을 취소하는 규칙을 만들고 해당 CSS 속성을 기본값으로 설정합니다.
div ul:first-child {
    background-color: transparent;
}

조건부로 스타일을 취소하면 첫 번째 요소를 제외한 모든 요소를 ​​효과적으로 타겟팅할 수 있습니다. 이 접근 방식은 레거시 브라우저와의 호환성을 제공하고 스타일 제외를 보다 세부적으로 제어할 수 있게 해줍니다.

위 내용은 CSS의 `:not(:first-child)` 선택기를 사용하여 시리즈의 첫 번째 요소를 제외한 모든 요소의 스타일을 지정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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