如何選擇特定div內的表格中的第一個TD

Question

我想使用css選擇器選擇我的表格的第一個td。 這是我的Html代碼。

<div class="mydiv"> 
    <table class="mytable"> 
     <tbody> 
      <tr> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

這裏是我的CSS代碼 第一次嘗試。

div.mydiv > table > tbody > tr > td 
    { 
     width:25px ; 
    } 

第二次嘗試

div.mydiv > table > tr > td 
{ 
    width:25px ; 
} 

看來他們都不工作。

問候。

Answer 1

既然你只有一個元素.mydiv表只是用:first-of-type，nth-child(1)或:first-child：

div.mydiv td:first-of-type { 
 
    width:25px 
 
}

<div class="mydiv"> 
 
    <table class="mytable"> 
 
     <tbody> 
 
      <tr> 
 
       <td>a</td> 
 
       <td>b</td> 
 
       <td>c</td> 
 
       <td>d</td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</div>

在這裏沒有必要使用!important這是不好的做法。

Answer 2

試試這個：

div.mydiv > table > tbody > td:first-of-type { 
    width:25px !important 
} 

Answer 3

div.mydiv > table > tbody > tr > td:first-child{ 

} 

這將選擇tr的第一個孩子是td。這應該給你你需要的東西。
希望這有助於

Answer 4

你可以使用:first-child僞選擇：

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

你也可以使用「：首個，type'。

參考：http://www.w3.org/TR/css3-selectors/#selectors

Answer 5

試試這個：

table.myTable > tbody > tr:first-child > td:first-child { 
    width:25px !important; 
} 

編碼快樂！

Answer 6

試試這個：

div.mydiv table.mytable tr > td:first-child { 
    width:25px !important; 
    color: #ff0000; 
} 

見下面的例子：

http://jsfiddle.net/kb3gN/8866/