:nth-child(n)의 기능은 무엇입니까?
- 青灯夜游원래의
- 2021-01-27 18:43:3032556검색
":nth-child(n)"는 CSS의 선택기입니다. 해당 기능은 요소 유형에 관계없이 상위 요소에 속하는 N번째 하위 요소를 일치시키는 것입니다. 매개변수 "n"은 숫자 또는 키워드 또는 공식(예: ":nth-child(3)", ":nth-child(even)").
이 기사의 운영 환경: Acer S40-51, CSS3&&HTML5&&HBuilder 스타일을 지정해야 하는 요소를 선택하는 데 사용됩니다. nth-child(n)은 CSS3의 선택자입니다.
:nth-child(n) 선택기는 상위 요소 인덱스가 n인 하위 요소를 일치시키는 데 사용됩니다. 즉, 요소 유형에 관계없이 상위 요소에 속하는 N번째 하위 요소를 선택하는 데 사용됩니다. 참고: n은 숫자, 키워드(홀수 및 짝수) 또는 수식일 수 있습니다.
예 1: n이 숫자인 경우
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:nth-child(n)选择器</title>
<style>
/*
:nth-child(n)选择器用于匹配父元素索引为n的子元素，即选取属于其父元素的第N个子元素，不论元素的类型。
n可以是数字、关键词（Odd 和 even）或公式。
*/
/* p:nth-child(2) {
background: pink;
} */
</style>
</head>
<body>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
</body>
</html>렌더링:
예 2: n이 키워드인 경우(홀수 및 짝수)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:nth-child(n)选择器</title>
<style>
p:nth-child(odd) {
background: pink;
}
p:nth-child(even) {
background: paleturquoise;
}
</style>
</head>
<body>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
<p>第六个段落。</p>
<p>第七个段落。</p>
<p>第八个段落。</p>
<p>第九个段落。</p>
<p>第十个段落。</p>
</body>
</html>렌더링: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:nth-child(n)选择器</title>
<style>
/*
使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色：
*/
p:nth-child(3n+0)
{
background:pink;
}
</style>
</head>
<body>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
<p>第六个段落。</p>
<p>第七个段落。</p>
<p>第八个段落。</p>
<p>第九个段落。</p>
<p>第十个段落。</p>
</body>
</html>렌더링: %EC%9D%98%20%EA%B8%B0%EB%8A%A5%EC%9D%80%20%EB%AC%B4%EC%97%87%EC%9E%85%EB%8B%88%EA%B9%8C? "161174403722093:nth-child(n)의 기능은 무엇입니까?")
더 많은 프로그래밍 관련 지식을 보려면
을 방문하세요! !
위 내용은 :nth-child(n)의 기능은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.