色彩行後仍/ css中

奇數行選擇給定一個表色彩行後仍/ css中

<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);}

它用相同的顏色對所有行着色。任何可能的解決方案？

來源

2013-01-20 Poul K. Sørensen

的問題是，所有的.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的瀏覽器仍然具有後備d efined。

來源

2013-01-20 18:08:38

它的罰款。我有一個問題，即我的CMS系統不允許我創建一個沒有進入源代碼視圖的表格（對我而言，但不適合客戶，但謝謝。 –

如果您確定每class="sechead"後只有兩個<tr>標籤。則U可以試試這個

<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-21 03:43:19 Arunu

色彩行後仍/ css中

回答

相關問題