html - 唯一のテーブル行で最初の子ではなく最後の子を取得します

Question

私は次のCSSを持っています：

table tbody tr:last-child td {
  padding-top: 7px;
  border-bottom: 0;
}

table tbody tr:first-child td {
  padding-top: 6px;
}

これで、1行だけのテーブルができました。の代わりに
唯一のテーブル行が割り当てられるようになりましたが、その逆にしたいと思います。first-childlast-child

Javascriptなしで方法はありますか？

score 1 · Accepted Answer

tr が同時に最初の子と最後の子である場合にのみになるルールを作成でき、これはとtable tbody tr:first-child:last-child td同じスタイルに追加されtable tbody tr:last-child tdます。次のようになります。

table tbody tr:last-child td,
table tbody tr:first-child:last-child td{
  padding-top: 7px;
  border-bottom: 0;
}

ここでうまくいくようです:) - http://jsfiddle.net/HjZU4/

score 1 · Accepted Answer

これはできません。マークアップに間違いがあるはずです。それが本当に唯一のである場合tr、両方のlastANDfirstが一致します。

ただし、どの CSS が適用されるかは、CSS ルールの順序によって異なります。したがってpadding-top: 7px; or padding-top: 6px;、それに応じてルールを配置することで、適用されるかどうかを判断できます。

編集：

問題は最後に行を自動的に挿入するプラグインによって引き起こされるため、:nth-last-child(2)最後から 2 番目の要素に一致させるために使用できます。
_{(ただし、ブラウザのサポートnth-last-childはよりわずかに悪いことに注意してくださいlast-child)}

2 に答える 2