样式表-如何使用列组修改位于该列中的TH标记

Question

我刚开始修改表格中的列组，并试图学习如何给css贴上标签，使特色列组中的TH成为特定的背景颜色，以及TD在该列组中的位置。我唯一的问题是，我不知道如何设置CSS来只反映这些部分。

我制作了一个示例表，位于：http://jsbin.com/ocezon/1/edit

如果我说得不对，请告诉我，我会尽力进一步解释的。我已经标记了TH和TD's，我希望能够使用列组分配的#table-5 #功能属性来修改。

我尝试过像#table-5 #featured TH { background: #000; }这样的代码，但没有成功。

编辑:我发现这可能是不可能的(在尝试了许多方法之后，我也无法让它起作用)...so我决定给出一个小技巧小马的答案，因为它建议了一种可行的方法；但是，我稍微修改了这个方法，以使将来修改起来很容易：http://jsbin.com/icasom/1/edit

Answer 1

在不使用colgroups的情况下，您可以为每一行的第三个子行设置样式：

#table-5 th:nth-child(3){ 
  background: blue;
}

#table-5 tr td:nth-child(3){
  background: #C0000E;
} 

http://jsbin.com/ocezon/3

我对此进行了修改，以便更容易地处理多个表，并使将来的修改更容易：http://jsbin.com/icasom/1/edit

Answer 2

您的表有一个奇怪的HTML结构、colgroup，而且th甚至没有在tr中包装：

<table id="table-5">
 <colgroup> 
   <col class="row" />
  <col class="basic"/>
  <col class="premium" id="featured"/>
  <col class="enterprise"/>
</colgroup>
  <thead>
    <tr>
        <th>row</th>
        <th>basic</th>
        <th>premium (modify this TH)</th>
        <th>enterprise</th>
    </tr>
  </thead>
        <tr>
            <td>blah</td>
            <td>blah</td>
            <td>blah (modfy this TD)</td>
            <td>blah</td>
        </tr>
        <tr>
            <td>blah</td>
            <td>blah</td>
            <td>blah (modfy this TD)</td>
            <td>blah</td>
        </tr>
        <tr>
            <td>blah</td>
            <td>blah</td>
            <td>blah (modfy this TD)</td>
            <td>blah</td>
        </tr>
</table>

您可以添加一些rgba颜色以使您的背景色变暗：http://jsbin.com/ocezon/9/ http://jsbin.com/ocezon/9/edit。