3

を使用してテーブルのみをゼブラストライプしたい。これにはjQueryを使用したくありません。

tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}

これをcssファイルに入れると、同じスタイルシートを呼び出すすべてのページのすべてのテーブルに影響します。私がやりたいのは、それを特定のテーブルに選択的に適用することです。

これを試しましたが、機能しません。

// in stylesheet
.zebra_stripe{
    tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}    
}

// in html
<table class="zebra_even">
<colgroup>
    <col class="width_10em" />
    <col class="width_15em" />
</colgroup>
<tr>
    <td>Odd row nice and clear.</td>
    <td>Some Stuff</td>
</tr>
<tr>
    <td>Even row nice and clear but it should be shaded.</td>
    <td>Some Stuff</td>
</tr>
</table>

この：

<table>
    <colgroup>
        <col class="width_10em" />
        <col class="width_15em" />
    </colgroup>
    <tbody class="zebra_even">

スタイルシートは、htmlの他の要素を適切にフォーマットしているので機能します。誰かがこの問題への答えを手伝ってくれますか？

4

3 に答える 3

4

コードは次のようになります。

.zebra_stripe{
    tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}    
}

これは間違っています（明らかに、または質問する必要はありません）が、それほど遠くはありません。

.zebra_stripe解決策は、既存のCSSセレクターに含める必要があるだけです。CSSは、あなたが書いたように、中括弧で囲まれたセレクターの複数の層をサポートしていません。（本当に必要な場合は、この種の構文をサポートするLessやSassのような他の方言がありますが、あなたの場合、ソリューションには巧妙な構文は必要ありません）

.zebra_stripe tbody tr:nth-child(even) td, .zebra_stripe tbody tr.even td {
    background:#e5ecf9;
}

これは、クラスを持つテーブルがあることを前提としていますzebra_stripe。

<table class='zebra_stripe'>
    ....
</table>

クラスのないテーブルはストライプ化されません。

ちなみに、両方のセレクターを残しておきましたが、両方は必要ありません。セレクターは、代替手段nth-child()なしで、それ自体でトリックを実行する必要があります。tr.evenこれtr.evenは、サポートしていないブラウザnth-child()（つまり、古いバージョンのIE）で必要になりますが、その場合、サポートする必要がある場合は、evenクラスで行うので、を使用する必要はありませんnth-child()。

于 2012-09-15T21:44:04.087 に答える
2

あなたのコードはLESSのようなcssパーサーエンジンで動作する可能性があります

// in stylesheet
.zebra_stripe{
    tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}    
}

通常のcssは次のようになります

.zebra_stripe tbody tr:nth-child(even) td,
.zebra_stripe tbody tr.even td {background:#e5ecf9;}
于 2012-09-15T21:42:36.097 に答える
2 
.zebra-stripe tbody tr:nth-child(even) td, .zebra-stripe tbody tr.even td {background:#e5ecf9;}
于 2012-09-15T21:44:04.333 に答える