English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
각 p 요소가 동일 유형에서2동일 수준의 형제 요소의 배경색：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>기본 강의(oldtoolbag.com)</title>
<style>
/* 홀수 절 */
p:nth-of-type(2n+1) {
color: red;
}
/* 짝수 절 */
p:nth-of-type(2n) {
color: blue;
}
/* 첫 번째 절 */
p:nth-of-type(1) {
font-weight: bold;
}
/* 두 번째 절 */
p:nth-of-type(2)
{
background:#ff0000;
}
</style>
</head>
<body>
<div>
<div>이 부분은 계산에 참여하지 않습니다.</div>
<p>이는 첫 번째 구절입니다。</p>
<p>이는 두 번째 구절입니다。</p>
<div>이 부분은 계산에 참여하지 않습니다.</div>
<p>이는 세 번째 구절입니다。</p>
<p>이는 네 번째 구절입니다。</p>
</div>
</body>
</html>테스트해 보세요 ‹/›:nth-of-type( <nth> ) where <nth> = <an-plus-b> | even | odd
:nth-of-type(n) 선택자는 동일한 유형의 n번째 동급 형제 요소를 매칭합니다。
n은 숫자, 키워드 또는 공식일 수 있습니다。
고려사항: 참조 :nth-child() 선택자. 이 선택자는 부모 요소 내의 n번째 자식 요소를 매칭합니다。Look at the :nth-child() 。
표에서의 숫자는 이 속성을 지원하는 첫 번째 브라우저 버전 번호를 나타냅니다。
| 선택자 | |||||
|---|---|---|---|---|---|
| :nth-of-type() | 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-of-type(odd)
{
background:#ff0000;
}
p:nth-of-type(even)
{
background:#0000ff;
}
</style>
</head>
<body>
<div>
<p>이는 첫 번째 구절입니다。</p>
<p>이는 두 번째 구절입니다。</p>
<p>이는 세 번째 구절입니다。</p>
<p>이는 네 번째 구절입니다。</p>
</div>
</body>
</html>테스트해 보세요 ‹/›공식（an+ b）.설명：a는 반복의 크기를 나타내며，N은 카운터입니다（0부터 시작），b는 오프셋입니다。
여기서, 모든 인덱스가3의 배수의 p 요소에 배경색을 지정했습니다：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>기본 강의(oldtoolbag.com)</title>
<style>
p:nth-of-type(3n+0)
{
background:#ff0000;
}
</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를 지원하지 않습니다 Internet Explorer-last-child() 선택자.</p>
</body>
</html>테스트해 보세요 ‹/›