CSS를 사용하여 어떻게 특정 번호의 아이를 얻을 수 있습니까?

CSS를 사용하여 어떻게 특정 번호의 아이를 얻을 수 있습니까?

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

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를 지원하고 싶다면 그렇게 할 수도 있습니다!간단한 Javascript(이 예에서는 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*/ }

언급URL : https://stackoverflow.com/questions/5664773/how-can-i-get-a-specific-number-child-using-css