定位奇偶風格特定表ID爲

Question

我有幾張桌子，而我只想針對偶數和奇數行：

<table class="record"> 
<tbody> 
    <tr> 
    <th scope="col">Score</th> 
    <th scope="col">Time</th> 
    </tr> 
    <tr> 
    <td>A</td> 
    <td>1.20</td> 
    </tr> 
    <tr> 
    <td>B</td> 
    <td>1.35</td> 
    </tr> 
    <tr> 
    <td>C</td> 
    <td>1.39</td> 
    </tr> 
    </tbody> 
</table> 

我試着用下面的代碼，我在網上找到的，但它的工作原理，但在所有的部位周圍的表：

tr:nth-child(even) { background: #666; } 
tr:nth-child(odd) { background: #CCC; } 

任何建議，我怎麼能在表上只針對一類的「記錄」？ 謝謝你的建議。

編輯： 如果這些表在另一個表中作爲td呢？ :)

Answer 1

首先第一件事情：你的問題顧名思義/要使用id，而在你的問題代碼您使用的是class，選擇相關的table元件狀態。這些是不等於;一個元素可能只有一個id，但多個類。也就是說，要到使用一類，發佈的答案已經涵蓋了。

如果，另一方面，你要使用id（如您的標題說明），然後更換.record用#idOfTable（記住一個id傳遞到您的HTML：<table id="idOfTable"><!-- other stuff --></table>）。

你可以，當然，有class選擇相結合的id：

只是通過祖先作爲選擇的一部分：

.record tr:nth-child(even) {background: #666;} 
.record tr:nth-child(odd) {background: #CCC;} 

JS Fiddle demo。

，您可能只希望這對tbody內工作的理由，你也可以傳遞，作爲選擇的一部分：

.record tbody tr:nth-child(even) {background: #666;} 
.record tbody tr:nth-child(odd) {background: #CCC;} 

JS Fiddle demo。

你可以，當然，有class選擇相結合的id：

#idOfTable.classNameOfTable { 
    /* CSS */ 
} 

Answer 2

只要你發佈像這樣的CSS代碼前加table.record：

table.record tr:nth-child(even) { background: #666; } 
table.record tr:nth-child(odd) { background: #CCC; } 

的table部分是劃定這隻適用於表格，因爲可能會有類record中的其他元素，並且您不會干擾它們。

.record只是指定類別（<elem>.<class>是語法，<elem>不是必需的）。

嵌套也很容易理解：它在外部元素內尋找匹配元素。 Here is the relevant W3S documentation.