分配给特定的列

选择个假设我们有这个网站：分配给特定的列

<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，它是动态的，所以我想访问thcol元素而不是直接
如何选择与特定col标签与CSS关联的特定标签？

来源

2013-07-26 RYN

你的问题令我困惑，但是，你是否试图将目标第二个th嵌套在thead元素内？如果是的话，比这是你正在寻找

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

Demo

按您的评论的选择，答案是没有，你不能这样做，与纯CSS，你不能跳出colgroup的选择在thead

来源

2013-07-26 12:52:01

（小记：这不会对IE8的工作，因为它是CSS3）下 – Pieter

@Pieter是的，你可以使用CSS3与[Selectivizr]馅饼（http://selectivizr.com/） –

是和否;我想通过从'col'元素寻址来选择第二个'th';我在'col'设置类，它是动态的，所以我想通过'col'元素访问'th'而不是直接访问 – RYN

元素可以使用此： -

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

{ 
// code 
}

来源

2013-07-26 12:54:08

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

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

，然后简单地添加你想要的东西，在你的CSS散列

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

来源

2013-07-26 13:49:54

分配给特定的列

回答

相关问题