如何選擇表格中的所有第一個td

Question

嗨，我想只選擇表中每行的第一個<td> （帶有文本“ label”的 td ），如果您有一個簡單的html，例如：

<table>
  <tr><td>label</td> <td>value</td></tr>
  <tr><td>label</td> <td>value</td></tr>
  <tr><td>label</td> <td>value</td></tr>
</table>

例如，我想使用選擇器將第一個<td></td>組的寬度僅分配給我不想使用的類。

我已經嘗試了以下選擇器：

table.widget tr:first-child td{
    width:10%;
    border:0;   
}

但是那個選擇器只會選擇第一個tr的第一個td而不是所有TD's所以我嘗試了

table.widget tr td:first-child{
    max-width:10%;
}

當然，我得到的是TD的第一個孩子的選擇。 不是td本身

有可能做到這一點？

Answer 1

單程：

table tr td:first-of-type {
background: lemonchiffon;
}

http://jsfiddle.net/PRrq5/2/

Answer 2

您的第二個選擇器實際上是正確的：

http://tinker.io/40f64

table.widget tr td:first-child {
    background: orange;
}

要選擇每個td的第一個孩子，選擇器將如下所示：

table.widget tr td :first-child { /* note the space after the td */
    // styles
}

但是，應注意的是，OP的示例表未對其應用widget類。

如果您的表表示鍵/值對的集合，則將標簽文本放在th可能更合適：

http://tinker.io/40f64/1

table.widget th {
    background: orange;
}

<table class="widget">
  <tr><th>label</th> <td>value</td></tr>
  <tr><th>label</th> <td>value</td></tr>
  <tr><th>label</th> <td>value</td></tr>
</table>

Answer 3

嘗試這個：

table tr td:first-child { color: red; }

小提琴： http : //jsfiddle.net/74MFH/1/