CSS 선택기를 사용하여 n번째 하위 요소의 특정 범위를 대상으로 지정하는 방법은 무엇입니까?

n번째 요소 그룹을 위한 CSS 선택기

지정된 CSS 선택기 `.myTableRow td:nth-child(?){
background-color: #FFFFCC;
}, n번째 하위 에 대한 특정 스타일을 타겟팅하고 설정할 수 있습니다. .myTableRow 요소 내의 요소. 그러나 2에서 4까지의 ` 열을 대상으로 수정해야 합니다.

해결책:

이를 달성하려면 다음 CSS를 사용할 수 있습니다. 선택기:

.myTableRow td:nth-child(n+2):nth-child(-n+4){
  background-color: #FFFFCC;
}

이 선택기는 다음 구문과 함께 :nth-child() 선택기를 활용합니다.

• :nth-child(n X): 다음에서 모든 하위 요소를 선택합니다. X번째 위치부터.
• :nth-child(-n x): X번째 위치까지의 모든 하위 요소를 선택합니다.

이 두 선택기를 결합하면 다음 요소를 대상으로 지정할 수 있습니다. 특정 범위.

예:

제공된 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>

수정된 CSS 선택기 `.myTableRow td 적용: nth-child(n 2):nth-child(-n 4){
background-color: #FFFFCC;
}, ` 열 2, 3, 4의 배경색을 설정합니다. #FFFFCC로

위 내용은 CSS 선택기를 사용하여 n번째 하위 요소의 특정 범위를 대상으로 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!