Áp dụng kiểu chỉ với mức độ đầu tiên của thẻ td

Question

Có cách nào để áp dụng kiểu Lớp cho chỉ một cấp thẻ td không?

<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> 

Answer 1

Có cách nào để áp dụng kiểu Lớp cho chỉ một cấp thẻ td không?

Có ^*:

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

Nhưng! Bộ chọn trực tiếp của con '>' không hoạt động trong IE6. Nếu bạn cần hỗ trợ trình duyệt (mà bạn có thể làm, than ôi), tất cả các bạn có thể làm là chọn phần tử bên trong riêng và bỏ thiết lập các phong cách:

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

---

^* Lưu ý rằng người đầu tiên ví dụ tham chiếu đến phần tử tbody không được tìm thấy trong HTML của bạn. Nó nên đã có trong HTML của bạn, nhưng các trình duyệt nói chung là ok với việc bỏ nó ra ... chúng chỉ thêm nó vào đằng sau hậu trường.

Answer 2

Tôi đoán bạn có thể thử

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

Hoặc

body table tr td { color: red; } 

nơi 'body' là một bộ chọn cho mẹ của bảng

Nhưng các lớp học có nhiều khả năng đúng cách đi đây.

Answer 3

phong cách này:

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

mang lại cho tôi:

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

Tuy nhiên, sử dụng một lớp học có lẽ là cách tiếp cận ngay tại đây.

Answer 4

Chỉ cần tạo bộ chọn cho các bảng bên trong MyClass.

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

(Để quát áp dụng cho tất cả các bảng bên trong, bạn cũng có thể làm table table td.)

Answer 5

thế nào về việc sử dụng CSS: first-child pseudo-class:

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

Answer 6

tôi muốn thiết lập chiều rộng của cột đầu tiên của bảng và tôi thấy rằng cột này hoạt động (trong FF7) - cột đầu tiên rộng 50px:

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

nơi đánh dấu của tôi là

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

Answer 7

Tôi nghĩ, Nó sẽ hoạt động.

.Myclass tr td:first-child{ } 

or 

.Myclass td:first-child { }