2

1 つは要素レベル 'td' で、もう 1 つはクラス レベル '.specialTable td' です。クラス レベルのスタイルは、再度指定しないとすべての 'td' スタイル プロパティを継承するため、いくつかの問題に遭遇しました。

私はCSSスタイルを持っています

td
{
  background-color:black;
}

そして、私は持っています

.specialTable tr:nth-child(even) {
    background-color: white;
}

と

.specialTable td
{
  background-color:none;
}

ここで何が起こるかというと、.specialTable td に背景を持たないように要求したにもかかわらず、要素スタイル 'td' から黒の背景を継承し、セルが上にあるため、要素スタイル 'tr' がブロックされます。行。

テーブルに交互行スタイルを設定しようとしています。元の 'td' 要素スタイルが邪魔にならないようにする方法を教えてください。

これがフィドルです： http://jsfiddle.net/PIyer/phADs/1/

4

5 に答える 5

2

CSSにタイプがありますが、それが問題かどうかはわかりません

specialTable tr:nth-child(even) {
    background-color: white;
}

する必要があります

.specialTable tr:nth-child(even) {
    background-color: white;
}

また、background-color:none は有効な css ではありません。おそらく background-color:transparent

于 2013-03-06T15:32:18.193 に答える
1

基本的なCSSオーバーライドを使用することで、物事を単純化できます。

あなたがこれを持っているとしましょう：

<table class="specialTable">
    <tr>
        <td>This is an odd row</td>
    </tr>
    <tr>
        <td>This is an even row</td>
    </tr>
    <tr>
        <td>This is an odd row</td>
    </tr>
    <tr>
        <td>This is an even row</td>
    </tr>
</table>

そして、デフォルト<td>のスタイルは次のとおりです。

td { 
    background-color:black;
    color: #FFF;
}

交互の（ゼブラ）スタイリングを.specialTableにするには、次のようにするだけです。

.specialTable tr:nth-child(even) td {
    background-color: blue;
}

これにより、evenタグ内の<td>すべてのタグの元のCSS定義が上書きされます。<td><tr>

ここで実際の例を確認してください：http：//jsfiddle.net/rh5vV/

nth-childsudoセレクターはIE8以前のバージョンでは機能しないことに注意することが重要です。そのため.even、偶数<tr>タグにクラスを適用することをお勧めします。

于 2013-03-06T15:42:49.690 に答える
1

none背景色の有効なプロパティではありません。これを試して：

.specialTable tr {
    background-color: black;
}

.specialTable tr:nth-child(even) {
    background-color: white;
}

または、例で使用することもできます

.specialTable td
{
    background-color: transparent;
}

これにより、白が透けて見えるはずです。

于 2013-03-06T15:40:30.697 に答える
0

これを試してみてください

 .specialTable tr td {
         background-color:transparent;
    }

background none を使用するのは正しくありません。代わりに透明を使用してください

http://jsfiddle.net/RBY2v/1/

于 2013-03-06T15:45:30.320 に答える
0

background-color:transparent;または に応じて使用できますbackground:none;。

.specialTable td {
  background-color:transparent;
}
于 2013-03-06T15:32:49.647 に答える