如何为不同的结果混合CSS类

时间:2010-09-29 14:54:10

标签: css html-table rows

我有一个表,其中偶数行被赋予类“偶数”而奇数行被赋予“奇数”。但是我也希望给出类似“完整”或“问题”的行类,它们可以为它们提供其他颜色,但我仍然希望颜色的色调是暗的还是浅的,这取决于它们是偶数还是奇数。

示例:

<table>
    <tr class="even problem">
    <tr class="odd complete">
    <tr class="even complete">
    <tr class="odd complete">
    <tr class="even incomplete">
    <tr class="odd complete">
</table>

我是否必须为每个组合创建单独的类,还是有其他方式?

3 个答案:

答案 0 :(得分:2)

你的意思是这样吗?

.even{
  background:#ccc;
}

.odd{
  background:#eee;
}

.even.problem{
   background:#900;
}

.odd.problem{
   background:#f00;
}

答案 1 :(得分:2)

您可以创建一个半透明的PNG文件,其背景为.complete和其他类,因此evenodd类的背景颜色仍然不足。

.complete { background: transparent url("path/to/bg.png") top left repeat;}

我没有测试它,但我可以工作。

答案 2 :(得分:1)

我同意Ventus的想法。我创建了一个小小的演示,但不使用图像使用CSS不透明度,为您提供更详细的概念。在这个例子中使用CSS不透明度的坏处是你的文本也会继承不透明度。

http://jsfiddle.net/ywhR2/