2012-01-16 3 views
1

Iは適切な境界半径の特性表の最初の行を与えることを意味する以下のセレクタ、ました:セレクタは、単に孫の代わりに孫の子供たちを見ていますか?

table.alt tr:first-of-type > *:first-of-type { border-radius: 5px 0 0 0 } 
table.alt tr:first-of-type > *:last-of-type { border-radius: 0 5px 0 0 } 
table.alt tr:first-of-type > *:only-child { border-radius: 5px 5px 0 0 } 

アイデアは、それが表頭にあったかどうか、現れた最初の何行可能にするましたまたは表の本体を、左上および右隅に必要なボーダー半径で適切に定形化する必要があります。私はthead/tbody/tfootの部分を除外して、テーブルにある最初のテーブル行を検索することを望んでいましたが、そうではないようです。 thead/tbody/tfootのそれぞれの最初のテーブル行を個別に一致させたいと考えています。だから、もっとこのようにセレクタを実行していることが表示されます。

table.alt > * > tr:first-of-type > *:first-of-type { border-radius: 5px 0 0 0 } 
table.alt > * > tr:first-of-type > *:last-of-type { border-radius: 0 5px 0 0 } 
table.alt > * > tr:first-of-type > *:only-child { border-radius: 5px 5px 0 0 } 

これは簡単に*:not(tfoot)を使用してテーブルのフッターのために固定することができますが、theadtbody要素の間に差別の問題がまだあります。 私のテーブルのほとんどのは、ではなく、すべてのテーブルのヘッダーを持っています。

このジレンマを回避する方法はありますか、またはテーブルのすべてのコーナーにborder-radiusを適用するためのより良い方法はありますか?
注:私はすべての表のセルに背景色を適用するので、外側の表の境界線の半径と重なっています。また、thまたはtdと一致するように、最後のセクションで*を使用します。

答えて

1

Duh、簡単な方法で修正します。 2番目のセクションをテーブルの最初の子を見て、そのセクションの最初の行を見てください...これは、最後の子とそのセクションの最後の行を探して、代わりに下のコーナーを行うためにもうまくいくでしょう。

table.alt > *:first-child > tr:first-of-type > *:first-child { border-radius: 5px 0 0 0 } 
table.alt > *:first-child > tr:first-of-type > *:last-child { border-radius: 0 5px 0 0 } 
table.alt > *:first-child > tr:first-of-type > *:only-child { border-radius: 5px 5px 0 0 } 

私はそれを理解するのに長い時間がかかりました。ちょっと混乱しているように見えますが、仕事は終わりです。

関連する問題