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

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

std::vector<Adsorbate> adsorbates(200);

对于有3个类的元素，请说出这个：

.syslibblock .rowgroup1 .mark.colgroup0 {}

你要写

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

fiddle

Answer 2

你错过的是你应该：

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

如何突出显示具有不同颜色

3 个答案: