>웹 프론트엔드 >CSS 튜토리얼 >CSS의 첫 번째 요소를 얻는 방법

CSS의 첫 번째 요소를 얻는 방법

藏色散人
藏色散人원래의
2020-11-23 11:22:086689검색

CSS에서 요소 수를 얻는 방법: 1. "nth-child(3)" 메서드를 통해 목록에서 세 번째 레이블을 가져옵니다. 2. "nth-child(3)" 메서드를 통해 목록에서 짝수 레이블을 가져옵니다. (2n)" 메서드;3. "nth-child(2n-1)" 메서드 등을 통해 목록에서 홀수 태그를 가져옵니다.

CSS의 첫 번째 요소를 얻는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

추천: "css 비디오 튜토리얼"

CSS는 nth-child(n), first-child, last-child

서문: 오늘 코딩할 때 직면한 요구 사항 처음 두 개의 태그를 선택합니다. 요소, 정보를 확인하고 기록하세요~

nth-child(n), first-child, last-child 사용법

참고: nth-child(n) 선택자는 상위 요소 요소의 n번째 하위와 일치합니다.

n은 숫자, 키워드 또는 수식일 수 있습니다.

nth-child(n) 사용법:

1, nth-child(3)

은 선택 목록의 세 번째 레이블을 나타내며, 코드는 다음과 같습니다:

li:nth-child(3){background:#fff}

2, nth-child(2n)

선택을 나타냅니다. 목록의 짝수 태그, 즉 2nd, 4th, 6th... 태그를 선택하는 경우 코드는 다음과 같습니다.

li:nth-child(2n){background:#fff}

3, nth-child(2n-1)

은 목록에서 홀수 태그, 즉 1st, 3rd, 5th, 7th... 태그를 선택하면 코드는 다음과 같습니다.

li:nth-child(2n-1){background:#fff}

4.nth-child(n+3)

는 태그가 선택 목록 시작에서 3번째부터 끝까지 코드는 다음과 같습니다.

li:nth-child(n+3){background:#fff}

5.nth-child(-n+3)

는 선택 목록의 레이블이 0부터 3까지라는 의미입니다. , 라벨은 3개 미만입니다. 코드는 다음과 같습니다.

li:nth-child(-n+3){background:#fff}

6. nth-last-child(3)

는 목록에서 마지막에서 세 번째 태그를 선택하라는 의미입니다. 코드는 다음과 같습니다.

li:nth-last-child(3){background:#fff}

first -child 사용법:

1, first-child

first-child는 목록에서 첫 번째 태그를 선택하는 것을 의미합니다. 코드는 다음과 같습니다.

li:first-child{background:#fff}

last-child 사용법:

1, last-child

last-child는 선택 목록의 마지막 태그를 나타내며, 코드는 다음과 같습니다.

li:last-child{background:#fff}

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

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