CSS nth-child를 사용하여 요소 범위를 선택하는 방법은 무엇입니까?

n번째 범위에 대한 CSS 선택기 향상

CSS의 n번째 하위 선택기를 사용하면 상위 요소 내의 위치에 따라 요소를 정확하게 선택할 수 있습니다. 그러나 특정 숫자로 정의되지 않은 범위에 이 선택기를 적용하는 것은 어려울 수 있습니다.

n번째 하위 범위 선택 확장

다음 CSS 선택기를 고려하세요.

<code class="css">.myTableRow td:nth-child(?){
  background-color: #FFFFCC;
}</code>

이 선택기는 다양한 "myTableRow" 클래스를 사용합니다. 그러나 물음표(?) 자리 표시자는 범위를 정의되지 않은 상태로 둡니다.

이 선택기를 2~4열에서는 다음 CSS를 사용할 수 있습니다.

<code class="css">.myTableRow td:nth-child(n+2):nth-child(-n+4){
    background-color: #FFFFCC;
}</code>

향상된 선택기 이해

이 선택기는 두 개의 추가 n번째 하위 선택기를 사용합니다.

• :nth-child(n 2): 2번째 위치부터 모든 하위를 선택합니다.
• :nth-child(-n 4): 4번째 위치까지 모든 하위를 선택합니다.

이 두 하위 선택기를 결합하면 2~4번째 위치의 요소를 포함하는 범위를 효과적으로 만들 수 있습니다.

사용 예

다음 HTML 테이블을 고려하세요.

<code class="html"><table>
  <tr class="myTableRow">
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
    <td>column 4</td>
    <td>column 5</td>
  </tr>
</table></code>

이 테이블에 향상된 CSS 선택기를 적용하면 배경색이 두 번째, 세 번째, 네 번째 "myTableRow" 내의 요소입니다. 이는 이러한 요소가 2~4로 정의된 범위 내에 있기 때문입니다.

위 내용은 CSS nth-child를 사용하여 요소 범위를 선택하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!