如何突出显示具有不同颜色的分组行和列的表格中的单元格

Question

我已成功创建具有交替颜色的行和列的分组。我试图使用colgroups和tbody，但放弃了colgroup，col：nth *，因为我无法让它们在交替行和列的情况下表现良好。我在建立表格时正在申请课程。 HTML例子如下：

<table class="syslibblock"> 
    <tr class="rowgroup0"> 
    <TD class="colgroup0">1-1-1</td> 
    <TD class="colgroup0">1-1-2</td> 
    <TD class="colgroup1">1-2-1</td> 
    <TD class="colgroup1">1-2-2</td> 
    </tr> 
    <tr class="rowgroup1"> 
    <TD class="mark colgroup0">2-1-1</td> 
    <TD class="mark colgroup0">2-1-2</td> 
    <TD class="colgroup1">2-2-1</td> 
    <TD class="colgroup1">2-2-2</td> 
    </tr> 
</table> 

我设置交替的背景颜色与下面的CSS：

.syslibblock .rowgroup0 .colgroup0 { 
    background: #004040; 
} 
.syslibblock .rowgroup0 .colgroup1 { 
    background: #404000; 
} 
.syslibblock .rowgroup1 .colgroup0 { 
    background: #006060; 
} 
.syslibblock .rowgroup1 .colgroup1 { 
    background: #606000; 
} 

这是按预期工作。我的问题是，我想通过对单元格2-1-1和2-1-2应用特殊格式来标记某些单元格。我已经为这些单元格添加了第二个“标记”，但是没有找到从css中捕获这些单元格的方法。

我预计下列选择器之一会做这项工作，因为它们更具体，但他们不这样做。 （实际上有就像那种颜色的背景的那些一组4种选择。）

.syslibblock .rowgroup1 .mark .colgroup0 {} 

.syslibblock .rowgroup1 .colgroup0 .mark {} 

我新的CSS和不知道我错过了什么。一个理想的答案将是正确的选择器来抓住我的'标记的单元格。如果我应该从完全不同的策略开始，那也没关系。我使用PHP来生成表格，但相信答案应该在CSS域中。

如何/为什么您的解决方案的作品的详细解释将不胜感激。

Answer 1

要选择某个具有多个类的元素，您不要用空格分隔这些类。你这样做，像这样：

.syslibblock .rowgroup1 .mark.colgroup0 {}

对于3类元素，说这个人：

<div class="a b c"></div> 

你会写

.a.b.c{}

fiddle

Answer 2

你在哪里ssing的是，你应该：

.syslibblock .rowgroup1 .mark{ 
    background: #000; 
} 

不：

.syslibblock .rowgroup1 .mark .colgroup0 {} 

因为在班级为.a .b .c的空间，它是一种父子关系不是兄弟关系。

There is a link.

Answer 3

您可以使用.mark特殊类当你需要它被应用，在不考虑选择你的HTML TR/TD结构。 这种方法可以让你更灵活。

这里举例： http://jsfiddle.net/zncdwxwu/1/

.syslibblock .mark { 
    background: red !important; 
    color: yellow; 
} 

在你的情况，因为你正在使用的属性背景.mark，你也需要使用!important，为了覆盖和应用新的颜色。另外，如果你想在你的CSS选择器中考虑你的HTML结构TR/TD，你可以避免!important并使用下面的代码;

http://jsfiddle.net/zncdwxwu/2/

.syslibblock .rowgroup1 .mark{ 
    background: red; 
    color: yellow; 
}