CSS3 : n 번째 자녀 () 선택
정의 및 사용
: N 번째 - 아이 (n)의 부모 요소 N 번째 요소와 일치하는 셀렉터.
N은숫자, 키워드 또는 수식 할 수있다.
팁 : 참조 선택기를 .선택기 n 번째 형제 자매 동일한 유형 일치한다.
브라우저 지원
표의 수치 속성의 버전 번호를 먼저 지원 브라우저를 나타낸다.
| 选择器 | |||||
|---|---|---|---|---|---|
| :nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
더 많은 예제
예 1
<P 홀수 및 짝수 사용되는 하위 요소와 일치하는 키워드로 사용할 수 있고, 그 인덱스가 홀수 또는 짝수 (제 아이의 인덱스는 1이다). 여기에서는 홀수 및 짝수 페이지 요소에 대한 두 개의 서로 다른 배경색을 지정
p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
»시도
예 2
화학식 (AN +의 b) 설명 사용 : 사이클의 대표의 크기를 N 이의 (0부터)이고, B는 오프셋된다. 여기에서 우리는 모든 인덱스는 세 페이지 요소의 배수는 배경 색상 지정은 다음과 같습니다
p:nth-child(3n+0)
{
background:#ff0000;
}
{
background:#ff0000;
}
»시도