Question

您好我只想选择表格中每一行的第一个<td>（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>

我想将例如10％的宽度仅分配给第一个<td></td>组，而选择器我不想使用类。

我尝试了以下选择器：

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

但该选择器只会选择第一个td的第一个tr而不是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/

如何选择表格中的所有第一个td

3 个答案: