CSS `nth-child` 선택기를 사용하여 테이블에서 특정 열을 선택하는 방법은 무엇입니까?

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

테이블에서 특정 열을 선택하려면 n번째 하위 CSS 선택기를 활용하세요. 제공된 선택기 '.myTableRow td:nth-child(?)'는 상위 테이블 행에서의 위치에 따라 테이블 데이터 셀(td)을 대상으로 합니다. 그러나 물음표 자리 표시자를 범위로 바꿔야 합니다.

n번째 하위 범위 선택

2~4열을 선택하려면 다음 방법 중 하나를 사용하세요.

옵션 1:

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

이 구문은 2번째 위치(n 2)부터 4번째 위치(-n 4)까지 셀을 선택하도록 보장합니다.

옵션 2(더 명확한 구문):

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

이 대안은 열 2와 4를 명시적으로 식별하는 보다 명확한 범위 지정을 제공합니다. 총 열 수.

n번째 하위 구문 설명:

• ':nth-child(n X)'는 'X번째' 위치의 요소를 대상으로 합니다.
• ':nth-child(-n X)'는 'X번째' 위치까지의 요소를 대상으로 합니다.

예:

다음 HTML을 고려하세요.

<code class="html"><table class="myTable">
  <tr>
    <td>Item 1</td>
    <td>Item 2</td>
    <td>Item 3</td>
  </tr>
</table></code>

'.myTable tr:nth-child(2)' 선택기를 적용하면 테이블의 두 번째 행이 강조 표시됩니다.

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