1

私のHTMLは次のようになります。

<table>
  <tr class='trclass'><td>1</td></tr>
  <tr class='trclass'><td>2</td></tr>
  <tr><td>not</td></tr>
  <tr class='trclass'><td>3</td></tr>
  <tr class='trclass'><td>4</td></tr>
  <tr class='trclass'><td>5</td></tr>
  <tr class='trclass'><td>6</td></tr>
  <tr class='trclass'><td>7</td></tr>
</table>

そして私のcssは次のようなものです：

table tr.trclass:nth-child(odd){color:red}

これはjsfiddle http://jsfiddle.net/JKmBK/へのリンクです

クラス 'trclass' を持つ tr の奇数行に別のスタイルを適用したいのですが、これは可能ですか?

4

4 に答える 4

1

CSS はコンテンツのセマンティクスを認識しないため、「奇数」は「DOM 順序による奇数の子インデックス」を意味します。odd可能であれば、奇数を含む行にクラスを追加するだけで、頭痛の種を避けることができます。HTML で直接それを行うことができない場合は、JavaScript を使用してください。

于 2013-10-09T03:05:13.517 に答える
0

このクラスがある場合：

table tr.trclass:nth-child(odd){color:red;}

次に、例外クラスをそれよりも具体的にします。

table tr.trclass.exceptionClass:nth-child(odd){color:inherit;}

また、特定性の低いスタイルを自動的にオーバーライドします。

ただし、nth-child はIE8 ではサポートされていないことに注意してください。これは 2 つ前のバージョンですが、まだかなり使用されています。ユーザーベースによって異なります。

于 2013-10-09T04:09:20.403 に答える
0

http://jsfiddle.net/stevemarvell/JKmBK/4/

それはjqueryで行うことができます：

$('.trclass:odd').css('color','red');

より可能性の高い解決策は、css クラスを追加することです。

于 2013-10-09T02:53:32.753 に答える