CSS에서 첫 번째 하위 요소를 제외하는 방법

藏色散人
풀어 주다: 2023-01-04 09:35:32
원래의
9213명이 탐색했습니다.

CSS에서 첫 번째 하위 요소를 제외하는 방법: 1. 의사 클래스 선택기 ":not"을 사용하여 제외 2. "nth-of-type" 또는 "nth-child"를 사용하여 제외 "+" 또는 "~" 형제 선택기로 첫 번째 요소를 제외한 하위 요소를 얻습니다.

CSS에서 첫 번째 하위 요소를 제외하는 방법

이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

css를 사용하여 첫 번째 요소를 제외한 하위 요소 가져오기

프런트 엔드 페이지 개발에서는 CSS를 사용하여 첫 번째 요소를 제외한 하위 요소를 선택해야 합니다. 예를 들어 각 범위 사이에 특정 거리가 필요합니다. , 각 범위에 대해 왼쪽 여백을 설정할 수 없습니다. 이로 인해 첫 번째 범위 앞에 간격이 생겨 조판에 영향을 줍니다. 다음으로 첫 번째 요소 이외의 하위 요소를 얻기 위해 CSS를 구현하는 다양한 방법을 설명하겠습니다.

효과는 다음과 같습니다.

CSS에서 첫 번째 하위 요소를 제외하는 방법

Design Dock https://www.wode007.com/sites/73738.html

기본 구조는 다음과 같습니다.

<style>
.dom div{
    float: left;
    height: 150px;
    line-height: 150px;
    width: 150px;
    margin: 20px;
    background: #ccc;
    text-align: center;
    color:#fff;
}
</style>
 <div class="dom">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
로그인 후 복사

방법 1: 사용 의사 클래스 선택기: not

<style>
.dom  div:not(:first-child){
	background:red;
}
</style>
로그인 후 복사

설명:

:not(selector) 선택기는 지정된 요소/선택기가 아닌 모든 요소와 일치합니다.

:first-child 선택기는 상위 요소의 첫 번째 하위 요소에 속하는 지정된 선택기를 선택하는 데 사용됩니다.

방법 2: n번째 유형 또는 n번째 하위 사용

<style>
.dom div:nth-of-type(n+2){
background:red;
}
</style>
로그인 후 복사

또는:

<style>
.dom div:nth-child(n+2){
background:red;
}
</style>
로그인 후 복사

설명:

n은 0부터 시작하고 n+2는 자연스럽게 두 번째 요소부터 시작합니다. 마찬가지로 홀수를 선택하는 경우 요소는 2n+1입니다. 짝수 요소를 선택하려면 2n+2로 작성해야 하며, 프로젝트 상황에 따라 사용할 수 있습니다.

【추천 학습: css 동영상 튜토리얼

방법 3: + 또는 ~ 형제 선택기를 영리하게 사용

<style>
.dom div+div{
   background:red;
}
</style>
로그인 후 복사

또는:

<style>
.dom div~div{
  background:red;
}
</style>
로그인 후 복사

지침:

+ 선택기: 바로 다음에 선택해야 하는 경우 요소 뒤의 요소와 둘 다 동일한 상위 요소를 갖고 있으면 인접한 형제 선택기를 사용할 수 있습니다.

~ 선택기: 이 기능은 지정된 요소 뒤에 있는 모든 형제 노드를 찾는 것입니다.

모두 div 요소이므로 첫 번째 요소에는 형제 요소가 없으므로 첫 번째 요소를 제외한 하위 요소를 얻을 수 있습니다.

위 내용은 CSS에서 첫 번째 하위 요소를 제외하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
css
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿