如何突出顯示具有不同顏色的分組行和列的表格中的單元格

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