針對文檔

Question

內第一次發生表內元素我試圖解決CSS選擇器的具體問題。我有foillowing HTML：

<table class="Layout"> 
 
    <tr> 
 
\t <td> 
 
\t  <table class="Region"> 
 
\t \t <tbody> 
 
\t \t  <tr> 
 
\t \t \t <th align="left">Header 1</th> 
 
\t \t  </tr> 
 
\t \t  <tr> 
 
\t \t \t <td> 
 
\t \t \t  <table class="SelectionTable"> 
 
\t \t \t \t <tbody> 
 
\t \t \t \t  <tr> 
 
\t \t \t \t \t <td>Text 1</td><td>Text 2</td> 
 
\t \t \t \t  </tr> 
 
\t \t \t \t </tbody> 
 
\t \t \t  </table> 
 
\t \t \t </td> 
 
\t \t  </tr> 
 
\t \t </tbody> 
 
\t  </table> 
 
\t </td> 
 
\t <td valign="top"></td> 
 
\t <td valign="top"> 
 
\t  <table class="Region"> 
 
\t \t <tr> 
 
\t \t  <th align="left" colspan="2">Header 2</th> 
 
\t \t </tr> 
 
       <tr> 
 
\t \t  <td>Text 1</td><td>Text 2</td> 
 
\t \t </tr> \t 
 
      </table> 
 
\t </td> 
 
    </tr> 
 
</table>

我需要做的是選擇文檔中的類「地區」的第一次出現，然後選擇日元素，它包含文本「Header 1」（這些表格中只有第1個元素）。我的理由是，我可以將背景顏色應用於此元素。

我現在有這個CSS其適用的背景顏色的兩個「區」表格的th元素：

TABLE.Region TH {background-color: #00A5DB;} 

但我想申請背景顏色：＃BAD80A只有第一次出現的「地區「

我知道我可以實現這一點使用JavaScript，我知道這是一種舊的方式安排頁面上的元素，但這是一個公司內部網的許多頁面的變化，所以改變只是樣式表將是這是迄今爲止實現這一目標的最快方式，因爲目前我沒有時間進行徹底改變！我們使用IE11作爲我們的主瀏覽器，因此如有必要，答案可能非常具體。

任何幫助，將不勝感激！

感謝

Answer 1

您可以在td使用first-child僞選擇，然後針對內部.region的th。

這裏有一個演示：

td:first-child .Region th { 
 
    background-color: red; 
 
}

<table class="Layout"> 
 
    <tr> 
 
    <td> 
 
     <table class="Region"> 
 
     <tbody> 
 
      <tr> 
 
      <th align="left">Header 1</th> 
 
      </tr> 
 
      <tr> 
 
      <td> 
 
       <table class="SelectionTable"> 
 
       <tbody> 
 
        <tr> 
 
        <td>Text 1</td> 
 
        <td>Text 2</td> 
 
        </tr> 
 
       </tbody> 
 
       </table> 
 
      </td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </td> 
 
    <td valign="top"></td> 
 
    <td valign="top"> 
 
     <table class="Region"> 
 
     <tr> 
 
      <th align="left" colspan="2">Header 2</th> 
 
     </tr> 
 
     <tr> 
 
      <td>Text 1</td> 
 
      <td>Text 2</td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

/*Both work fine*/ 

table.Layout td:first-child th{ 
    background: #555; 
} 

td:first-child th{ 
    background: #555; 
} 

的jsfiddle - http://jsfiddle.net/uL9uLLuf/