CSS의 :nth-child() 선택기를 사용하여 N번째 요소를 모두 선택하려면 어떻게 해야 합니까?

CSS로 N번째 요소마다 선택

요소 그룹을 처리할 때 n번째 요소마다 타겟팅할 수 있습니다. CSS는 이 작업을 용이하게 하기 위해 :nth-child() 선택기를 제공합니다.

:nth-child(n)를 사용하면 상위 요소 내에서 n번째 하위 요소를 선택할 수 있습니다. n번째 값을 지정할 수 있을 뿐만 아니라 덧셈, 뺄셈, 계수 곱셈과 같은 산술 연산을 수행할 수도 있습니다.

div:nth-child(4)

이 선택기는 네 번째 div 요소를 선택합니다. 그러나 각 n번째 요소에 대해 개별 선택기를 작성해야 합니다.

:nth-child(an)는 이 프로세스를 크게 단순화합니다. 'a'는 산술 연산을 사용하여 'n'에 적용할 수 있는 계수를 나타냅니다.

div:nth-child(4n)

이 선택기는 네 번째 div 요소마다 선택하므로 여러 선택기가 필요하지 않습니다.

더 큰 제어를 위해 선택기 내에서 산술 표현식을 활용할 수 있습니다:

• :nth-child(an b)
• :nth-child(an - b)
• :nth-child(a*n)

예: 대상 h1 또는 p와 같은 다른 요소를 제외하고 div 요소만 선택하려면 대신 :nth-of-type()을 사용하세요. :nth-child():

body div:nth-of-type(4n)

참고: n을 생략하면 기본값은 1로 설정되어 모든 요소가 선택됩니다.

4n 및 4n 4:

두 선택기는 네 번째 div 요소마다 일치하지만, 시작점에 미묘한 차이가 있습니다.

• :nth-child(4n)은 0부터 세기 시작하므로 4, 8, 12 등의 위치에 있는 요소를 선택합니다.
• :nth-child(4n 4) 4부터 세기 시작, 그래서 위치 4, 8, 12 등의 요소를 선택합니다.

위 내용은 CSS의 :nth-child() 선택기를 사용하여 N번째 요소를 모두 선택하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!