CSS3: nth-child(n) 사용 참고 사항

:nth-child(n) ---->어떤 원소를 선택하십시오. 이 원소는 반드시 어떤 부모 원소 아래의 n번째 하위 원소여야 합니다.
p:nth-child(n) ---->p 요소를 선택하고 이 p 요소는 부모 요소 아래의 n번째 하위 요소여야 합니다
주의: n은 1부터 시작합니다
다음 코드, p:nth-child(1), 두 번째div의 첫 번째 하위 요소 p만 선택;
첫 번째div의 첫 번째 p를 선택하지 않습니다. 첫 번째div의 첫 번째 p 요소는 첫 번째 하위 요소가 아닙니다.

<style>
    p:nth-child(1){
        color:red
    }        
style>
<div style="border:1px solid">
    <span>div span      。span>
    <p>div       。p>
    <p>div         。p>
div><br>

<div style="border:1px solid">
    
    div       。
    <p>    div         。p>
div>

 
정방향 범위
li:nth-child(n+6)
여섯 번째부터 시작하는 하위 요소 선택
음방향 범위
:nth-child(-n+9)
첫 번째부터 아홉 번째 하위 요소까지 선택합니다.사용처:nth-child(-n+9), 9번째와 이전의 모든 하위 요소를 선택할 수 있습니다
전후 제한 범위
:nth-child(n+4):nth-child(-n+8)
4-8 자식 요소를 선택합니다.nth-child(n+4) 사용: nth-child(-n+8) 우리는 특정한 범위 내의 하위 요소를 선택할 수 있습니다. 위의 예는 네 번째부터 여덟 번째 하위 요소입니다.
홀수
:nth-child(odd)
:nth-child(even)

하위 요소 선택

:nth-child(3n+1),
1,4,7,10 선택
범위 고급 사용법
nth-child(n+2):nth-child(odd):nth-child(-n+9)
nth-child(n+2) 사용: nth-child(odd): nth-child(-n+9) 우리가 선택한 하위 요소는 2위부터 9위까지이며 기수만 포함됩니다.
전재 대상:https://www.cnblogs.com/baiyangyuanzi/p/6603858.html