有效的方式使用CSS

Question

我有以下示例表來選擇表中奇數行和特定的細胞：

<table id="inputTable"> 
    <thead> 
    <tr> 
     <th>Id</th> 
     <th>Name</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>1</td> 
     <td>Mike</td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>eric</td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>jonas</td> 
    </tr> 
    </tbody> 
</table> 

我想知道我怎麼可能能夠選擇表中的每個奇數行和第二小區？

我想出了這一點：

#inputTable tbody tr:nth-child(odd) td:nth-child(2){ 
    background-color: red; 
} 

，但沒有奏效。任何人都有解決辦法？

Answer 1

你的CSS沒有工作，因爲它的目標是#mainTable，但你的HTML說id="inputTable"。

Answer 2

tr:nth-child(odd) td:nth-child(2){ 
 
    background-color: red; 
 
}

<table id="inputTable"> 
 
    <thead> 
 
    <tr> 
 
     <th>Id</th> 
 
     <th>Name</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>Mike</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>eric</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>jonas</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 3

嘗試像這樣的奇偶選擇使用CSS。

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