"nth-of-child"를 표 셀에 적용 할 때의 어려움

표 셀에 n 번째 자식 스타일을 적용하려고하지만 작동하지 않습니다. 제 코드에 따르면 각 두 번째 셀 내용을 오른쪽 정렬하고 회색 색상으로하고 싶습니다. 그러나 그 스타일은 효과가 없습니다."nth-of-child"를 표 셀에 적용 할 때의 어려움

<!DOCTYPE html> 
<html> 
<head><title>test table centerring</title></head> 
<body> 
<style type="text/css"> 
    td:nth-of-child(2) { 
     text-align: right; 
     color: #ccc; 
    } 
</style> 

<table border="1"> 
    <thead> 
     <tr> 
      <th>#</th> 
      <th>Name</th> 
      <th>Value</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>Name 1</td> 
      <td>Value 1</td> 
     </tr> 
     <tr> 
      <td>2</td> 
      <td>Name 2, Name 2, Name 2, Name 2</td> 
      <td>Value 2</td> 
     </tr> 
     <tr> 
      <td>3</td> 
      <td>Name 3</td> 
      <td>Value 3</td> 
     </tr> 
     <tr> 
      <td>4</td> 
      <td>Name 4</td> 
      <td>Value 4, Value 4, Value 4, Value 4</td> 
     </tr> 
    </tbody> 
</table>   
</body></html>

I 형 수정 객체 사양의 다른 종류의 시도했습니다 : 여기

코드는 "TD", "그럴 TD를", "테이블 TBODY의 그럴 TD는"아무것도 내 테이블에 영향을주지 않습니다.

또한 ID를 사용하여 테이블을 식별하고 ID에 스타일을 적용하려고 시도했지만 이는 도움이되지 않습니다.

P. IE9, Chrome, FF로 테스트했습니다.

출처

2012-04-26 Budda

:nth-of-child 선택자는 없습니다. 당신은

출처

2012-04-26 22:18:56 animuson

덕분에 많이 나타납니다, 그 도움이! 나는 그 차이를 알지 못했다. – Budda

tr td:nth-child(2) { 
    text-align: right; 
    color: #ccc; 
}

... 함께 두 :nth-child 및 :nth-of-type 선택기를 혼합 한 것으로 DEMO.

출처

2012-04-26 22:20:16

"nth-of-child"를 표 셀에 적용 할 때의 어려움

답변

관련 문제