html - 如何改变特定表行 ID 的阴影

Question

我正在使用 Ruby on Rails 生成一个表。使用 css 可以很容易地为奇数/偶数行设置不同的颜色。给特定 id/class 的行着色也很容易。我需要根据 id 对表中的行进行着色。我的问题是，如何交替使用该 ID 的颜色，IE:为给定 ID 交替使用相同颜色的不同色调？

#owner tr:nth-of-type(odd){ background:#eee !important;}

这种性质的 CSS 不起作用。我唯一的解决方案是 JS/JQ 吗？非常喜欢纯 CSS 解决方案。

Answer 1

如果我理解你的问题，你可以使用 rgba 来遮蔽颜色。

• 背景颜色:rgba(0, 0, 0, 1.5);//较暗
• 背景颜色:rgba(0, 0, 0, 1.0);//正常
• 背景颜色:rgba(0, 0, 0, 0.5);//打火机

CSS

.table-class {
width: 500px;
font-size: 15px;
}

.table-class td {
width: 25%;
}

#owner tr:nth-child(odd) {
background-color: rgba(0, 0, 0, 1.2);
color: rgba(255, 255, 255, 0.8);
}

#owner tr:nth-child(even) {
background-color: rgba(0, 0, 0, 0.8);
color: rgba(255, 255, 255, 1.2);
}

html

<table class="table-class" id="owner">
<tr>
<td>test test</td>
<td>test test</td>
<td>test test</td>
<td>test test</td>
</tr>
<tr>
<td>test test</td>
<td>test test</td>
<td>test test</td>
<td>test test</td>
</tr>
<tr>
<td>test test</td>
<td>test test</td>
<td>test test</td>
<td>test test</td>
</tr>
<tr>
<td>test test</td>
<td>test test</td>
<td>test test</td>
<td>test test</td>
</tr>
</table>

JSFiddle 您可以试用它看看这是否是您需要的。

http://jsfiddle.net/t4J9s/