0

HTML:

<table>
<tr class="not-counted"><th>Heading 1</th></tr>
<tr><td>key1</td><td>val1</td></tr>
<tr><td>key2</td><td>val2</td></tr>
<tr class="not-counted"><th>Heading 2</th></tr>
<tr><td>key3</td><td>val3</td></tr>
</table>​

CSS スタイル:

table tr:not(.not-counted):nth-child(even) td {
    background-color: gray;
}​

デモ: http://jsfiddle.net/MartyIX/fdtpL/

key3 を含む TR の背景も灰色になることを望んでいましたが、うまくいきません。CSSを正しく書くには？

ありがとう！

4

2 に答える 2

2

CSSで、スタイル設定されていない（または非表示の同じ結果）行数が不明なゼブラ行を含むテーブルのスタイルを設定します。これらのスタイル設定されていない行は、テーブル内の任意の位置にあります。
スタイリングされる残りの各行の前には、奇数の位置にある不明な数のスタイルなしの行と、偶数の位置にある不明な数のスタイルなしの行があります。

制約を追加しない限り、CSS2.1またはCSS3で特定のニーズをスタイル設定することはできません。
たとえば、スタイルが設定されていない行がどれだけ発生するかを知っている場合は、次のtwitの2つのフィドルがトリックを実行します：https ：//twitter.com/#！/ PhilippeVay / statuses/166243438436687873これは地獄のCSSです。本番環境では絶対にやらないでください。簡単に述べたように、jQuery/Sizzleとその疑似:visibleははるかに優れています。または、スタイルを設定する各行にサーバー側のクラスを追加することをお勧めします。

あなたの例の他のフィドル：http：//jsfiddle.net/yBKqy/2
番目のスタイルのない行の隣の行まで機能することがわかります。以下の残りの行の前には、スタイルが設定されていない奇数の行とスタイルが設定されていない偶数の行があります。適用されるルールは、最後に宣言されたルールになります。AFAIKは、意味のある方法でいずれかを適用する方法はありません。最初のセレクターにウェイトを追加すると、常に適用されます。そうでない場合は、常に最後のものが適用されます。

別のスタイルなしの行またはテーブルの終わりが存在する前に、スタイルなしの行に続くことができる行の量がわかっている場合は、別のフィドルがあります。http://jsfiddle.net/yBKqy/3/この
特定の例は、4行以下で機能します。行は6ではありません。6で動作させることはできますが、7では失敗します。

于 2012-05-06T11:31:55.513 に答える
0

ダミー行を使用して問題を解決しました。

HTML

<table>
<tr><th>Heading 1</th></tr>
<tr style="display:none;"><th></th></tr> <!-- dummy line -->
<tr><td>key1</td><td>val1</td></tr>
<tr><td>key2</td><td>val2</td></tr>
<tr><th>Heading 2</th></tr>
<tr style="display:none;"><th></th></tr> <!-- dummy line -->
<tr><td>key3</td><td>val3</td></tr>
</table>​

CSS

table tr:nth-child(even) td {
    background-color: gray;
}​

デモ

http://jsfiddle.net/MartyIX/fdtpL/3/

私はそれを本当に誇りに思っているわけではありませんが、それで多くの時間を失いました.

于 2012-05-06T12:32:29.970 に答える