CSS 의사 클래스 nth-child() 예제에 대한 자세한 설명

이 기사에서는 CSS 의사 클래스 nth-child() 예제에 대한 자세한 설명을 제공하므로 모든 사람이 nth-child() 의사 클래스가 수행할 수 있는 작업을 이해할 수 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

CSS3의 nth-child() 의사 클래스는 HTML에서 서식이 지정된 Excel 스타일시트를 만드는 데 매우 유용합니다. 또한 테이블에 의존하지 않고도 그리드 레이아웃을 생성하는 데 사용됩니다.

먼저 nth-child() 의사 클래스에 대해 알아봅시다. [추천 관련 영상 튜토리얼: css tutorial, css3 tutorial! 】

nth-child() 의사 클래스 기본 규칙:

우리가 사용하는 구문은 :nth-child(a n + b)입니다. 여기서 a는 주파수이고 b는 초기 오프셋입니다. 이는 n = 0에서 시작하지만 양수 값만 포함하는 무한 계열을 생성합니다.

이를 더 명확하게 해주는 몇 가지 예:

2n, 2n + 0
2,4,6,8,10,12......

2n + 1 또는 홀수
1,3,5,7,9,11......

2n + 2
2,4,6,8,10,12......

2n + 3
3,5,7,9,11,12......

2n + 4
4,6,8,10,12,14......

3n, 3n + 0 또는 3n + 3
3,6,9,12,15,18......

3n + 1
​ 1,4,7,10,13,16…

그러면 계열이 b로 시작하여 각 값에 대해 a씩 증가하는 것을 볼 수 있습니다. 0 또는 음수 결과를 건너뛰는 것은 DOM 트리에서 이전을 볼 수 없다는 것을 의미합니다.

nth-child() 의사 클래스 예:

다음으로 nth-child() 의사 클래스의 역할을 알아보기 위한 예를 들어보겠습니다.

예 1: hover와 함께 사용

이 예제에서는 n번째 자식 의사 클래스와 ~일반 형제 선택자를 사용합니다.

먼저 여러 div 컨테이너를 왼쪽으로 띄우고 nth-child를 사용하여 10개의 상자마다 새 행을 시작하여 그리드를 만듭니다.

#stage div {
    float: left;
    margin: 5px;
    width: 60px;
    height: 50px;
    background: #efefef;
}
#stage div:hover { background: red; }
#stage div:nth-child(10n+1) { clear: left; }

HTML에서는 각 div 컨테이너에 대한 그리드를 만듭니다( #div1 , #div2, ..., #div100) ID를 추가한 다음 다음과 같이 hover 이벤트를 할당했습니다.

#div1:hover ~ div:nth-child(1n) {
   background: yellow; 
}
#div2:hover ~ div:nth-child(2n) {
   background: yellow; 
}
#div3:hover ~ div:nth-child(3n) {
   background: yellow; 
}
#div4:hover ~ div:nth-child(4n) {
   background: yellow; 
}
...

이는 커서가 특정 div 위에 있으면 이 div의 각 n번째 형제가 모두 노란색으로 변한다는 것을 의미합니다. 예를 들어 숫자 3(#div3) 위에 마우스를 올리면 빨간색으로 바뀌고, 3의 배수인 모든 div는 노란색으로 변합니다. 시도해 보고 효과를 살펴보겠습니다.

예 2: nth-child를 사용하여 테이블 형식 지정

CSS의 보다 일반적인 예는 HTML 테이블을 보다 전문적으로 보이도록 형식 지정하는 방법입니다. 예: 열 또는 행 색상 교대:

별로 예쁘지는 않지만 마커는 매우 간단하며 색상을 쉽게 변경할 수 있습니다. '타탄' 테이블 효과의 경우 알파 투명도가 있는 배경색을 사용하므로 열(빨간색)과 행(파란색) 색상이 만나면 세 번째(보라색) 색상이 생성됩니다.

이 예에서 테이블의 클래스 값은 "tartan"입니다.

.tartan tr:nth-child(odd) {
    background: rgba(0,0,255,0.5);
}
.tartan td:nth-child(even) {
    background: rgba(255,0,0,0.5);
}

투명한 배경 없이 다른 색상을 지정할 수 있도록 교차하는 셀의 위치를 ​​직접 지정하려면 다음을 사용할 수도 있습니다.

.tartan tr:nth-child(odd) td:nth-child(even) {
    background: #fff;
}

여기 for 테이블의 모든 홀수 행의 홀수 셀과 짝수 행의 짝수 셀입니다. 효과를 살펴보겠습니다.

위 스타일에서는 다음을 주목해야 합니다. 기억하기 쉽도록 홀수와 짝수의 약칭 방식을 사용합니다.

요약: 위 내용은 이 글의 nth-child() 의사 클래스 사용에 대한 전체 소개입니다. nth-child() 의사 클래스를 직접 사용하여 효과를 얻고 이해를 깊게 할 수 있기를 바랍니다. 모든 사람의 학습에 도움이 될 것입니다.

위 내용은 CSS 의사 클래스 nth-child() 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!