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:th或th.col2或.col2 th，...

我想选择th，但要从col元素进行寻址; 我在col上设置了这个课程，它是动态的，所以我想通过th元素访问col，而不是直接如何使用CSS选择与特定col标记关联的特定标记？

Answer 1

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

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

Demo

根据您的评论，答案为否，您无法使用纯CSS执行此操作，您无法弹出colgroup以选择thead <中的元素/ p>

Answer 2

您可以使用： -

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

{
 // code
}

Answer 3

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

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

然后只需在你的CSS下添加你想要的东西

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

选择分配给特定列的

3 个答案: