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
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
