html - 选择分配给特定列

Question

假设我们有这个 html：

<table>
    <caption>test</caption>
    <colgroup>
        <col class='col1'/>
        <col class='col2'/>
        <col class='col3'/>
    </colgroup>
    <thead>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell1.1</td>
            <td>Coll1.2</td>
            <td>Coll1.3</td>
        </tr>
        <tr>
            <td>Cell2.1</td>
            <td>Coll2.2</td>
            <td>Coll2.3</td>
        </tr>
        <tr>
            <td>Cell3.1</td>
            <td>Coll3.2</td>
            <td>Coll3.3</td>
        </tr>
    </tbody>
</table>

我们有这个 CSS：

.col2{
    background-color: #AAA;
}
.col1,col3{
    background-color: #FFF;
}

现在我想选择th与col2列关联的在其上放置背景图像。
像.col2:thorth.col2或.col2 th, ...

我想选择但通过从元素th寻址；col我正在设置类col，它是动态的，所以我想th按col元素而不是直接访问
我如何选择col与 CSS 的特定标签相关联的特定标签？

Answer 1

你可以使用这个： -

thead tr th:nth-of-type(2)

{
 // code
}

Answer 2

您的问题使我感到困惑，但是，您是否要针对th嵌套在thead元素内的第二个目标？如果是，那么这就是您正在寻找的选择器

table thead tr th:nth-of-type(2) { /* Targets 2nd table head */
   /* Styles goes here */
}

演示

---

根据您的评论，答案是否定的，您不能用纯 CSS 做到这一点，您不能colgroup从thead

Answer 3

如果选择的标题总是第二个（听起来css是动态的，不是哪一列，但我可能是错的）你总是可以使用id。

<th id="header2">Column2</th>

然后只需在该哈希下的CSS中添加您想要的东西

#header2{
     background-image: url('foobar.png');
}