CSS 의사 클래스 nth-child를 사용하는 방법-CSS 튜토리얼-php.cn

CSS 의사 클래스 nth-child를 사용하는 방법

不言

풀어 주다： 2018-12-08 17:48:19

원래의

4741명이 탐색했습니다.

CSS에는 n번째 자식 의사 클래스가 있습니다. 이 의사 클래스를 어떻게 사용하나요? 다음 글에서는 CSS에서 가상 클래스 CSS 의사 클래스 CSS 의사 클래스 CSS 의사 클래스 nth-child를 사용하는 방법를 사용하는 방법를 사용하는 방법를 사용하는 방법을 소개하겠습니다. 구체적인 내용을 살펴보겠습니다.

CSS 의사 클래스 CSS 의사 클래스 CSS 의사 클래스 nth-child를 사용하는 방법를 사용하는 방법를 사용하는 방법

CSS 의사 클래스 CSS 의사 클래스 CSS 의사 클래스 nth-child를 사용하는 방법를 사용하는 방법를 사용하는 방법는 선택기에 조건을 추가하고 n번째(n번째) 하위 요소에 스타일을 적용할 수 있게 해주는 의사 클래스입니다.

CSS 의사 클래스 CSS 의사 클래스 CSS 의사 클래스 nth-child를 사용하는 방법를 사용하는 방법를 사용하는 방법는 항목이 많은 테이블에서 쉽게 볼 수 있도록 배경색을 교체하려는 경우 매우 유용합니다.

다음과 같이 CSS 의사 클래스 CSS 의사 클래스 CSS 의사 클래스 nth-child를 사용하는 방법를 사용하는 방법를 사용하는 방법

CSS 의사 클래스 CSS 의사 클래스 CSS 의사 클래스 nth-child를 사용하는 방법를 사용하는 방법를 사용하는 방법 사용법을 살펴보겠습니다

元素:CSS 의사 클래스 CSS 의사 클래스 CSS 의사 클래스 nth-child를 사용하는 방법를 사용하는 방법를 사용하는 방법(值){样式的内容}

로그인 후 복사

숫자 외에도 2n+1 및 일부 수학식, even(even) 등을 설정할 수 있습니다. 값으로.

짝수에만 적용: 2n 또는 짝수
홀수에만 적용: 2n+1 또는 홀수

다른 상황도 있으니 구체적인 적용 예를 살펴보겠습니다

먼저 HTML 코드는 다음과 같습니다

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<ul type="square">
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
<li>列表项目6</li>
</ul>
</body>
</html>

로그인 후 복사

Run 효과는 아래 그림과 같습니다

CSS 의사 클래스 CSS 의사 클래스 CSS 의사 클래스 nth-child를 사용하는 방법를 사용하는 방법를 사용하는 방법

그런 다음 nth - child를 사용하여 배경색이 특정 목록 항목에만 적용되는 #add8e6이 되도록 설정합니다.

짝수를 선택한 상황

n번째 자식 값을 짝수 또는 2n으로 설정한 경우

CSS 코드

ul li:CSS 의사 클래스 CSS 의사 클래스 CSS 의사 클래스 nth-child를 사용하는 방법를 사용하는 방법를 사용하는 방법(even){
	background-color: skyblue;
}

로그인 후 복사

브라우저에 다음과 같은 효과가 표시됩니다

CSS 의사 클래스 CSS 의사 클래스 CSS 의사 클래스 nth-child를 사용하는 방법를 사용하는 방법를 사용하는 방법

홀수인 상황 숫자가 선택되었습니다

n번째 하위 값이 홀수 또는 2n+1로 설정되었습니다.

CSS 코드

ul li:CSS 의사 클래스 CSS 의사 클래스 CSS 의사 클래스 nth-child를 사용하는 방법를 사용하는 방법를 사용하는 방법(odd){
	background-color: skyblue;
}

로그인 후 복사

브라우저에 다음과 같은 효과가 표시됩니다

CSS 의사 클래스 CSS 의사 클래스 CSS 의사 클래스 nth-child를 사용하는 방법를 사용하는 방법를 사용하는 방법

n번째 요소만 선택한 경우

입력 n번째 하위 값에 적용할 항목 번호입니다. 여기에는 3을 입력합니다.

CSS 코드

ul li:CSS 의사 클래스 CSS 의사 클래스 CSS 의사 클래스 nth-child를 사용하는 방법를 사용하는 방법를 사용하는 방법(3){
	background-color: skyblue;
}

로그인 후 복사

브라우저에 표시되는 효과는 다음과 같습니다

CSS 의사 클래스 nth-child를 사용하는 방법

n번째 이상의 요소를 선택할 때

n+~n번째 - 아이가 해당 항목의 값을 입력하면 적용이 시작됩니다. 여기 n+4가 있습니다.

CSS 코드

ul li:CSS 의사 클래스 CSS 의사 클래스 CSS 의사 클래스 nth-child를 사용하는 방법를 사용하는 방법를 사용하는 방법(n+4){
	background-color: skyblue;
}

로그인 후 복사

브라우저에서 실행했을 때의 효과는 다음과 같습니다

CSS 의사 클래스 nth-child를 사용하는 방법

위 내용은 CSS 의사 클래스 nth-child를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!