html - 避免/HTML标签改变和行？

Question

有没有办法限制/约束<colgroup>/ <col>HTML 标签中定义的样式的“操作”字段。

给定下表：

<table>
    <colgroup>
        <col align="center" />
        <col align="center" style="background-color: lightgrey;" />
        <col align="center" />
    </colgroup>
    <thead>
        <tr>
            <th>Column A</th>
            <th>Column B</th>
            <th>Column C</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1.a</td>
            <td>1.b</td>
            <td>1.c</td>
        </tr>
        <tr>
            <td>2.a</td>
            <td>2.b</td>
            <td>2.c</td>
        </tr>
    </tbody>
</table>

我background-color: lightgrey;不希望将其应用于“B 列”单元格（第二个th）thead。

Answer 1

您始终可以特别为该单元格应用样式，或者<tr>为您的标题行设置整个样式。

http://jsfiddle.net/QQ7LJ/

 <tr style="background-color:white;">
        <th>Column A</th>
        <th>Column B</th>
        <th>Column C</th>
 </tr>

简而言之：不，没有办法“限制”css，它将匹配每个可用的目标，并且你的样式<col>将匹配整个列。为了获得不同的样式，您需要以某种方式覆盖它，最简单的方法是显式设置与一般样式不匹配的样式。

编辑，您也可以在样式表块中执行此操作，方法是使用 CSS3 选择器:nth-of-type并将选择器范围限定为<tbody>元素。

http://jsfiddle.net/QQ7LJ/1/

tbody td:nth-of-type(2) {
 background-color: lightgrey;   
}​

以及对 HTML 的更改（其他一切都相同）

<colgroup>
    <col align="center" />
    <col align="center"/>
    <col align="center" />
</colgroup>