2

次を使用してcssでテーブルのスタイルを設定しようとしています:

tr:nth-child(odd) {background-color: black;}

td:nth-of-type(even) {background-color: green;}

しかし、なぜtd:nth-of-type(even)が よりも強いのtr:nth-child(odd)かと尋ねています。両方のスタイルを受け取る必要があるセルは常に緑色です。なぜですか?

4

5 に答える 5

6

td要素は要素の上にありtrます。ここには特異性の問題はなく、積み重ね順だけです。他のネストされた要素でも同じ問題が発生します。

http://cssdeck.com/labs/moa13oth

<div class="a"><div class="b">Foo</div></div>

.a {
  background: black;
}

.b {
  background: green;
}
于 2013-10-09T20:46:42.403 に答える
3

「強度」の問題ではありません。これtdは、DOM ツリーのサブ要素でありtr、親をオーバーライドするスタイルが子要素に適用されるためです。

W3C HTML DOM 標準によると、HTML ドキュメント内のすべてがノードです。

ドキュメント全体がドキュメント ノードです すべての HTML 要素は要素ノードです HTML 要素内のテキストはテキスト ノードです すべての HTML 属性は属性ノードです コメントはコメント ノードです。の場合、そのスタイル (またはルール) が評価され、レンダリングされます。

詳細については、次をご覧ください。

http://www.w3schools.com/htmldom/dom_nodes.asp

于 2013-10-09T20:46:49.117 に答える
0

1) セルは緑色です。

2) 行は黒です。

あなたの例では、緑のセルの各行が黒の行に完全に重なっています。

<td> にマージンを割り当てると、基になる黒色も表示されると思います。

また、(奇数) ルールの後に「td」を追加してみてください。

tr:nth-child(odd) td {background-color: black;}
于 2013-10-10T13:09:43.660 に答える
0

tr:nth-child(odd) {背景色: 黒;}

td:nth-of-type(even) {背景色: 緑;}

CSS で td にスタイルを適用したためです。これが最後のルールです。基本的に、最後のルールにあるものは、競合する限り、前のルールを上書きします。

そのため、tr のスタイルに従う必要がある場合。それらの行を切り替えます。そしてやりたいことが実現するかもしれません。

于 2013-10-10T03:01:15.727 に答える