用於爲表格創建斑馬背景的CSS（SCSS？）選擇器

Question

我是編碼的新手，我一直在爲表格創建斑馬背景時遇到一些麻煩......無論我如何使用CSS選擇元素，會出現。

目標代碼看起來是這樣的：

<table class="striped"> 
    <tr> 
    <td class="main"> 
     Test Submit 
    </td> 
    <td> 
     <button>Submit</button> 
    </td> 
    </tr> 

其中塊（從到）重複幾次，從而產生表。

及以下的CSS代碼中，我試圖創建斑馬背景：

table.striped { 
    tbody tr:nth-child(even){ background: red;} 
} 

我在網上搜索答案，許多人似乎被分享，因爲我已經寫了相同的代碼（或類似的東西）。 ..但我沒有出現。

我弄錯了選擇器如何在CSS中工作？那個選擇器（tbody tr：nth-​​child（偶數））不是按照我所希望的那樣瞄準所有的偶數？

有沒有一種很好的方法來調試CSS相關的問題？ console.log大多數時間不會返回非常有意義的消息。

非常感謝您的協助！

PS。我發現了一些答案，在jQuery中做了訣竅......但我確信CSS也可以做到這一點？

Answer 1

您需要在表中添加更多行。因爲即使是每第二排。

而且你的CSS是無效的

table.striped tr:nth-child(even) { background: red;} 

http://jsbin.com/wigitequxu/edit?html,css,output

Answer 2

我首先看到的是，你的HTML片段似乎不完整：收盤</table>丟失。

然後，您需要更多的表格才能在自己的表格上看到自定義樣式。

最後，您嵌套CSS聲明，從而使它們無效。

這是working example based on your code。

- 編輯：對不起，沒有看到答案已發佈之前，我張貼我的。