0

こんにちは、次のような単純な html がある場合、テーブル内のすべての行の最初<td>(tdテキスト"label"を含む)のみを選択したいと思います。

<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>たとえば、クラスを使用したくないセレクターを持つ最初のグループにのみ 10% の幅を割り当てたいと思います。

次のセレクターを試しました：

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それ自体ではない

これを達成することは可能ですか？

4

3 に答える 3

3

一方通行：

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

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

于 2013-04-10T20:15:23.447 に答える
3

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
}

widgetただし、OP のサンプル テーブルにはクラスが適用されていないことに注意してください。

テーブルがキーと値のペアのコレクションを表現している場合は、ラベルテキストを 内に配置する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>
于 2013-04-10T20:18:02.167 に答える
0

これを試して：

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

フィドル: http://jsfiddle.net/74MFH/1/

于 2013-04-10T20:15:34.133 に答える