色彩行后仍/ 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中

回答

相关问题