English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:nth-child(an+b) 이 CSS pseudo-class는 현재 요소의 모든 형제 요소를 찾고, 그런 다음 위치 순서로 정렬하여1CSS pseudo-class:nth-child() 선택자+child 중 표현식(an1b) 매칭된 요소 집합(n=0,2b) 매칭된 요소 집합(n=0,3,
...). 예제:+3 0n 3 또는 간단히
1n+매칭하는 세 번째 요소. 4.3 0 또는 간단히 n이 모든 요소를 매칭합니다. (호환성 경고: Android 브라우저 1以下的版本 n과1n 매칭 방식이 다릅니다. 1n+n과
2n+0은 일치하며, 취향에 따라 선택할 수 있습니다.) 20 또는 간단히 2、4、6、8n 매칭 위치를2n+...의 요소(n=0일 때,10=0, 첫 번째 요소는 존재하지 않습니다. 왜냐하면
2n+1 위치를 매칭하는 요소. odd 키워드를 이 표현식 대신 사용할 수 있습니다. 1、3、5、7시작排序). even 키워드를 이 표현식 대신 사용할 수 있습니다.
3n+4 위치를 매칭하는 요소. odd 키워드를 이 표현식 대신 사용할 수 있습니다. 4、7、10、13...에 포함된 요소. ...
a와 b는 모두 정수이며, 요소의 첫 번째 자식 요소의 인덱스는 1또는 다시 말해, 이 피seudo-class는 집합 { an + b; n = 0, 1, 2, ...}에 포함된 자식 요소. 또한 주의해야 할 것은 an이 b보다 앞에 위치해야 하며, b로 작성할 수 없습니다.+an 형식으로 지정합니다.
각 p 요소가 매칭하는 부모 요소 내의 n번째 요소를 지정합니다: 2 자식 요소의 배경색:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>기본 가이드(oldtoolbag.com)</title>
<style>
p:nth-child(2)
{
background:orange;
}
</style>
</head>
<body>
<h1>이는 제목</h1>
<p>이는 첫 번째段落입니다。</p>
<p>이는 두 번째段落입니다。</p>
<p>이는 세 번째段落입니다。</p>
<p>이는 네 번째段落입니다。</p>
<p><b>주의:</b> Internet Explorer 8 또한 이전 버전의 브라우저는 :nth를 지원하지 않습니다-child() 선택자.</p>
</body>
</html>테스트를 보세요 ‹/›:nth-child(n) 선택자는 부모 요소 내의 n번째 자식 요소를 매칭합니다. 요소 유형은 제한이 없습니다.
n 숫자, 키워드 또는 공식일 수 있습니다.
알림: 참조:선택자선택자는 동일 유형의 n번째 동급 형제 요소를 매칭합니다.
tr:nth-child(2n+1)
HTML 테이블의 홀수 행을 나타냅니다.
tr:nth-child(odd)
HTML 테이블의 홀수 행을 나타냅니다.
tr:nth-child(2n)
HTML 테이블의 짝수 행을 나타냅니다.
tr:nth-child(even)
HTML 테이블의 짝수 행을 나타냅니다.
span:nth-child(0n+1)
자식 요소 중 첫 번째 span 요소를 나타냅니다. :first와 함께 사용됩니다.-child 선택자의 작용은 동일합니다。
span:nth-child(1)
은 부모 요소의 첫 번째 서브 요소가 span 이름의 태그인 것을 선택합니다
span:nth-child(-n+3)
span 요소를 일치시키기 위해 세 번째 서브 요소까지 일치시킵니다。
표中的数字은 이 속성을 지원하는 첫 번째 브라우저 버전 번호를 나타냅니다。
| 선택자 | |||||
|---|---|---|---|---|---|
| :nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
홀수와 짝수는 인덱스가 홀수나 짝수인 서브 요소를 일치시키기 위해 키워드로 사용할 수 있습니다(이 인덱스는 첫 번째 서브 노드입니다1) 여기서 우리는奇수와 짝수 p 요소에 두 가지 다른 배경색을 지정했습니다：
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>기본 가이드(oldtoolbag.com)</title>
<style>
p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
</style>
</head>
<body>
<h1>이는 제목</h1>
<p>이는 첫 번째段落입니다。</p>
<p>이는 두 번째段落입니다。</p>
<p>이는 세 번째段落입니다。</p>
<p>이는 네 번째段落입니다。</p>
<p><b>주의:</b> Internet Explorer 8 또한 이전 버전의 브라우저는 :nth를 지원하지 않습니다-child() 선택자.</p>
</body>
</html>테스트를 보세요 ‹/›공식(a^n+ b) 설명: a는 반복의 크기를, N은 카운터(0부터 시작), 그리고 b는 이동량을 나타냅니다. 여기서 우리는 모든 인덱스가3의 배수의 p 요소에 배경색을 지정했습니다：
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>기본 가이드(oldtoolbag.com)</title>
<style>
p:nth-child(3n+0)
{
background:orange;
}
</style>
</head>
<body>
<h1>이는 제목</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三 번段落。</p>
<p>第四 번段落。</p>
<p>第五 번段落。</p>
<p>第六 번段落。</p>
<p>第七 번段落。</p>
<p>第八 번段落。</p>
<p>第九 번段落。</p>
<p><b>주의:</b> Internet Explorer 8 또한 이전 버전의 브라우저는 :nth를 지원하지 않습니다-child() 선택자.</p>
</body>
</html>테스트를 보세요 ‹/›