첫 번째 수준의 td 태그에만 스타일 적용

한 레벨의 td 태그에만 클래스 스타일을 적용하는 방법이 있습니까?

<style>.MyClass td {border: solid 1px red;}</style>

<table class="MyClass">
  <tr>
    <td>
      THIS SHOULD HAVE RED BORDERS
    </td>
    <td>
      THIS SHOULD HAVE RED BORDERS
      <table><tr><td>THIS SHOULD NOT HAVE ANY</td></tr></table>
    </td>
  </tr>
</table>

한 레벨의 td 태그에만 클래스 스타일을 적용하는 방법이 있습니까?

예 ^* :

.MyClass>tbody>tr>td { border: solid 1px red; }

그러나! ' >'직접 하위 선택기는 IE6에서 작동하지 않습니다. 해당 브라우저 (아마도)를 지원 해야하는 경우 내부 요소를 별도로 선택하고 스타일을 설정 해제하면됩니다.

.MyClass td { border: solid 1px red; }
.MyClass td td { border: none; }

^* 첫 번째 예는 tbodyHTML에없는 요소 를 참조합니다 . 그것 해야 당신의 HTML에 있었지만, 브라우저는 단지 배후에 추가 ... 일반적으로 그것을 밖으로 떠나는 확인합니다.

CSS : first-child 의사 클래스를 사용하는 방법은 무엇입니까?

.MyClass td:first-child { border: solid 1px red; }

이 스타일 :

table tr td { border: 1px solid red; }
td table tr td { border: none; }

나에게 준다 :

이 http://img12.imageshack.us/img12/4477/borders.png

그러나 클래스를 사용하는 것이 아마도 올바른 접근법 일 것입니다.

MyClass 내부의 테이블 선택기를 만드십시오.

.MyClass td {border: solid 1px red;}
.MyClass table td {border: none}

일반적으로 모든 내부 테이블에 적용하려면을 수행 할 수도 있습니다 table table td.

나는 테이블의 첫 번째 열의 너비를 설정하고 싶었고 (FF7에서) 작동했습니다. 첫 번째 열의 너비는 50px입니다.

#MyTable>thead>tr>th:first-child { width:50px;}

내 마크 업이 있던 곳

<table id="MyTable">
 <thead>
  <tr>
   <th scope="col">Col1</th>
   <th scope="col">Col2</th>
  </tr>
 </thead>
 <tbody>
   ...
 </tbody>
</table>

나는 그것이 효과가있을 것이라고 생각한다.

.Myclass tr td:first-child{ }

 or 

.Myclass td:first-child { }

시도해 볼 수있을 것 같아

table tr td { color: red; }
table tr td table tr td { color: black; }

또는

body table tr td { color: red; }

여기서 'body'는 테이블 부모의 선택기입니다.

그러나 수업은 여기에가는 올바른 방법 일 것입니다.