0

テーブルを与えられた

<table>
<tr class="sechead">...
<tr>...
<tr>... 
<tr class="sechead">...
<tr>...
<tr>...
</table>

私は以下を試しました。sechead の後に来る行の色を交互に変えたいです。

table tr.sechead:nth-child(even) ~ tr{background-color:rgb(75,172,198);}
table tr.sechead:nth-child(odd) ~ tr{background-color:rgb(153,129,189);}

すべての行を同じ色で色付けします。これに対する可能な解決策はありますか？

4

2 に答える 2

1

問題は、後のすべての行.secheadが最初の行の後に来ることです.sechead

HTML を調整しても問題ない場合は、次の方法を試してください。

<table>
  <tbody>
    <tr class="sechead">...</tr>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tbody>
    <tr class="sechead">...</tr>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  ...
</table>

その後、あなたのスタイルは次のようになります。

tbody > tr {background-color:rgb(75,175,198);}
tbody:nth-child(even) > tr {background-color:rgb(153,129,189);}

「奇妙な」セレクターを削除したことに注意してください。これにより、サポートしていないブラウザーでもnth-childフォールバックが定義されます。

于 2013-01-20T18:08:38.277 に答える
0

<tr>すべての後にタグが2つしかないことが確かな場合class="sechead"。次に、これを試すことができます

<table>
<tr class="sechead"><td>Hello</td></tr>
<tr><td>content1</td></tr>
<tr><td>content2</td></tr>
<tr class="sechead"><td>welcome</td></tr>
<tr><td>content4</td></tr>
<tr><td>content5</td></tr>
</table>

CSS

<style>
tr{width:50px;height:30px;}
table tr.sechead + tr{background-color:rgb(75,172,198);}
table tr.sechead + tr+tr{background-color:rgb(153,129,189);}
</style>
于 2013-01-21T03:43:19.530 に答える