n번째 자식의 용도는 무엇입니까?

nth-child 사용 방법: 1. 짝수 개의 요소를 선택하려면 nth-child(even)를 사용하면 됩니다. 2. 홀수 개의 요소를 선택하려면 nth-child(odd)를 사용할 수 있습니다. 특정 위치의 요소를 선택하려면 특정 위치 인덱스를 사용하세요. 4. 특정 범위의 요소를 선택하려면 다음을 사용할 수 있습니다. nth-child(-n+3) {font-weight:bold;}

nth-child는 CSS의 의사 클래스 선택기로, 상위 요소의 특정 위치에 있는 하위 요소를 선택하는 데 사용됩니다. 이 기사에서는 n번째 자식의 사용과 몇 가지 일반적인 애플리케이션 시나리오를 소개합니다.

1. 기본 구문

nth-child 구문은 다음과 같습니다.

父元素:nth-child(n)

그 중 상위 요소는 선택될 상위 요소를 나타내고, n은 선택될 하위 요소의 위치를 ​​나타냅니다.

참고: 위치는 1부터 계산됩니다.

2. 사용 예

아래에서는 몇 가지 구체적인 예를 통해 nth-child의 사용법을 소개합니다.

1. 짝수 요소 선택

상위 요소 아래의 짝수 하위 요소를 모두 선택하려면 nth-child(even)를 사용하면 됩니다.

예를 들어 목록에서 짝수 행을 모두 선택하려면 다음 코드를 사용할 수 있습니다.

li:nth-child(even) {
background-color: #ccc;
}

2. 홀수 요소 선택

상위 요소 아래의 홀수 하위 요소를 모두 선택하려는 경우 , n번째 자식(홀수)을 사용할 수 있습니다.

예를 들어, 테이블의 모든 홀수 행을 선택하려면 다음 코드를 사용할 수 있습니다:

tr:nth-child(odd) {
background-color: #ccc;
}

3. 특정 위치의 요소를 선택합니다.

상위 요소 아래의 특정 위치에 있는 하위 요소만 선택하려는 경우 요소의 경우 특정 위치 색인을 사용할 수 있습니다.

예:

목록에서 첫 번째 요소를 선택하려면 다음을 사용할 수 있습니다.

li:nth-child(1) {
color: red;
}

목록의 마지막 요소를 선택하려면 다음을 사용할 수 있습니다.

li:nth-child(n):last-child {
color: blue;
}

4 특정 요소 범위를 선택합니다

n번째. -child 또한 수식을 사용하여 요소 범위를 선택할 수 있습니다.

예:

상위 요소 아래에서 처음 세 개의 하위 요소를 선택하려면 다음을 사용할 수 있습니다.

nth-child(-n+3) {
font-weight: bold;
}

상위 요소 아래의 마지막 5개 하위 요소를 선택하려면 다음을 사용할 수 있습니다.

nth-child(n+6):nth-child(-n+10) {
font-style: italic;
}

3. 참고

n번째 자식을 사용할 때 주의할 사항이 몇 가지 있습니다.

1 상위 요소는 동일한 유형의 요소여야 합니다. nth-child는 동일한 유형의 하위 요소만 선택할 수 있습니다. 예를 들어 상위 요소 아래의 첫 번째 div와 첫 번째 범위는 선택할 수 없습니다.

2. 의사 클래스 선택자의 순서가 중요합니다. n번째 하위 선택기가 동일한 스타일 시트에서 여러 번 사용되는 경우 후속 규칙이 이전 규칙을 덮어씁니다.

3. nth-child는 0이 아닌 1부터 계산됩니다. 이는 일부 프로그래밍 언어에서 계산이 수행되는 방식과 다릅니다. 차이점에 유의하세요.

4. 요약

nth-child는 다양한 위치 매개변수를 사용하여 상위 요소의 특정 위치에 있는 하위 요소를 선택할 수 있는 도구입니다. 특정 위치의 요소를 선택하든 특정 범위 내의 요소를 선택하든, nth-child는 이를 빠르게 달성하는 데 도움이 됩니다.

그러나 nth-child의 사용은 특정 규칙을 준수해야 한다는 점을 기억해야 합니다. 특히 상위 요소는 동일한 유형의 요소여야 합니다. 이 글이 nth-child를 올바르게 이해하고 사용하는 데 도움이 되기를 바랍니다. .

위 내용은 n번째 자식의 용도는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!