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

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的第一个 child .不是 td本身

有可能做到这一点吗？

Answer 1

您的第二个选择器实际上是正确的:

http://tinker.io/40f64

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

要选择每个 td 的第一个 child ，选择器将像这样:

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>