2009-03-05 75 views
104

是否有將類樣式應用於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> 

回答

179

有沒有辦法將類風格應用到td標籤的一個級別?

*

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

但是! '>'直接子選擇器在IE6中不起作用。如果您需要支持的瀏覽器(你可能做的,唉),所有你能做的就是單獨選擇內部元件和未設置樣式:

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

*注意,第一示例引用了在HTML中未找到的tbody元素。它應該已經在你的HTML,但瀏覽器通常可以放棄它......他們只是在幕後添加它。

+0

您的第一個片段(使用子選擇器)在Firefox 3.0.1中似乎不起作用。我在'這不應該有'部分附近出現紅色邊框。 – 2009-03-05 01:49:43

+0

這不適用於Chrome – bstoney 2009-03-05 01:49:59

+1

您的第二個示例是正確的,但您的第一個示例將在所有內容上添加邊框。 「.MyClass> tr> td」可能會工作(在良好的瀏覽器中) – nickf 2009-03-05 01:50:14

2

我想你可以嘗試

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

或者

body table tr td { color: red; } 

其中「身體是你的表的父

選擇,但類是最有可能的正確方法去這裏。

6

只需爲MyClass中的表選擇器。

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

(一般地適用於所有內表,你也可以做table table td。)

46

如何使用CSS:第一個孩子僞類:

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

我想設置表的第一列的寬度,我發現這工作(在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> 
4

我認爲,它將工作。

.Myclass tr td:first-child{ } 

or 

.Myclass td:first-child { } 
相關問題