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

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

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

Answer 1

你的问题让我很困惑，但是，你是否试图定位嵌套在 thead 元素中的第二个 th ？如果是，那么这就是您正在寻找的选择器

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

Demo

---

根据您的评论，答案是否，您不能使用纯 CSS 做到这一点，您不能弹出 colgroup 以选择 中的元素thead