CSS를 사용하여 특정 숫자의 자식을 얻는 방법은 무엇입니까?

나는이 table누구 td의 동적으로 생성됩니다. 나는 첫 번째와 마지막 아이를 얻는 방법을 알고 있지만 내 질문은 다음과 같습니다.

CSS를 사용하여 두 번째 또는 세 번째 자식을 얻는 방법이 있습니까?

최신 브라우저의 td:nth-child(2)경우 두 번째 td및 td:nth-child(3)세 번째에 사용하십시오. 이것들 td 은 모든 행에 대해 두 번째와 세 번째 를 검색한다는 것을 기억하십시오 .

버전 9 이전의 IE와의 호환성이 필요한 경우 Tim에서 제안한대로 형제 결합기 또는 JavaScript 를 사용하십시오 . 또한 그의 방법에 대한 설명과 설명은 이 관련 질문에 대한 나의 대답을 참조하십시오 .

IE 7 및 8 (및 IE6을 포함하지 않는 CSS3를 지원하지 않는 다른 브라우저)의 경우 다음을 사용하여 두 번째 및 세 번째 하위를 얻을 수 있습니다.

둘째 자녀 :

td:first-child + td

세번째 자녀 :

td:first-child + td + td

그런 다음 + td선택하려는 추가 어린이마다 하나씩 추가하십시오.

IE6를 지원하고 싶다면 그렇게 할 수 있습니다! 작은 자바 스크립트 (이 예제에서는 jQuery)를 사용해야합니다.

$(function() {
    $('td:first-child').addClass("firstChild");
    $(".table-class tr").each(function() {
        $(this).find('td:eq(1)').addClass("secondChild");
        $(this).find('td:eq(2)').addClass("thirdChild");
    });
});

그런 다음 CSS에서 클래스 선택기를 사용하여 원하는대로 변경하십시오.

table td.firstChild { /*stuff here*/ }
table td.secondChild { /*stuff to apply to second td in each row*/ }