TD의 첫 번째와 마지막 TD를 연속으로 선택하는 방법은 무엇입니까?

TD의 첫 번째와 마지막 TD를 연속으로 선택하는 방법은 무엇입니까?

어떻게 첫 번째와 마지막을 선택할 수 있습니까?TD연속으로?

tr > td[0],
tr > td[-1] {
/* styles */
}

당신은 사용할 수 있습니다.:first-child그리고.:last-child유사 선택기:

tr td:first-child,
tr td:last-child {
    /* styles */
}

이것은 모든 주요 브라우저에서 작동해야 하지만 IE7은 요소가 동적으로 추가될 때 몇 가지 문제가 있습니다(IE6에서는 작동하지 않습니다).

다음 스니펫을 사용할 수 있습니다.

  tr td:first-child {text-decoration: underline;}
  tr td:last-child {color: red;}

다음 유사 클래스 사용:

:첫 번째 자식은 "이 요소가 부모의 첫 번째 자식인 경우 선택"을 의미합니다.

:last-child는 "이 요소가 부모의 마지막 자식인 경우 선택"을 의미합니다.

요소 노드(HTML 태그)만 영향을 받으며 이러한 유사 클래스는 텍스트 노드를 무시합니다.

첫 번째 자식 및 마지막 자식을 사용할 수 있습니다. pseudo-selectors:

tr td:first-child{
    color:red;
}
tr td:last-child {
    color:green
}

아니면 다음과 같은 다른 방법을 사용할 수 있습니다.

// To first child 
tr td:nth-child(1){
    color:red;
}

// To last child 
tr td:nth-last-child(1){
    color:green;
}

양쪽 모두 완벽하게 작동합니다.

sass(scss)를 사용하는 경우 다음 스니펫을 사용할 수 있습니다.

tr > td{
   /* styles for all td*/
   &:first-child{
     /* styles for first */ 
   }
   &:last-child{
    /* styles for last*/
   }
 }

행에 선행(또는 후행)이 포함된 경우th앞의 태그td당신은 그것을 사용해야 합니다.:first-of-type그리고:last-of-type선택기그렇지 않으면 첫 번째td행의 첫 번째 요소가 아니면 선택되지 않습니다.

이것은 다음을 제공합니다.

td:first-of-type, td:last-of-type {
    /* styles */
}

사용할 수 있습니다.

table trd: 첫째 자녀의 경우 첫째 자녀 {csshere} 및

table trd: 마지막 자식의 마지막 자식 {csshere}.

언급URL : https://stackoverflow.com/questions/7228800/how-to-select-first-and-last-td-in-a-row