分配給特定的列

選擇個假設我們有這個網站：分配給特定的列

<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

分配給特定的列

回答

相關問題