更改第二列和第三列和奇數行的背景顏色

我正在製作一個合併第一列中的行的表，所以當我試圖給它一些奇數行上的背景顏色樣式時，第一列沒有正常工作，更改第二列和第三列和奇數行的背景顏色

我使用

tr:nth-child(even) { 
    background-color: #eee; 
} 
tr:nth-child(odd) { 
    background-color: #fff; 
}

爲了使偶數行灰色的，但我需要避免第一和最後一列

一將最好的！

（編輯）

來源

2016-01-20 Racana

你能定義'不好看嗎？你能提供你的html嗎？你可以在https://jsfiddle.net/中重現錯誤嗎？ –

你可以使用：不是（：第一胎），以避免這些元素（TD和/或日）。見下面

tr:nth-child(even) td:not(:first-child), 
tr:nth-child(even) td:not(:last-child) { 
    background-color: #eee; 
}

來源

2016-01-20 13:23:00

你應該如下另一個屬性添加到第一行和最後一行：

tr:nth-child(even) { 
    background-color: red; 
} 
tr:nth-child(odd) { 
    background-color: yellow; 
} 
tr:first-child { 
    background-color: blue; 
} 
tr:last-child { 
    background-color: green; 
}

在這裏看到活生生的例子：http://codepen.io/anon/pen/zrpGvr

來源

2016-01-20 13:23:20

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
tr:nth-child(2n+2) { 
 
    background: gray; <!-- even color except first row--> 
 
} 
 
    tr:nth-child(2n+3) { 
 
    background: yellow; <!-- odd color--> 
 
} 
 
tr:nth-last-child(-n+1) { 
 
    background-color: white; <!-- last row color --> 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<h1>testing</h1> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>First line</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Second line</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Third line</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Fourth line</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Fifth line</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Fifth line</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Fifth line</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Fifth line</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 

 
</body> 
 
</html>

來源

2016-01-20 13:27:36

我需要在第一列和最後一列上有不同的圖案，例如在10x4矩陣中，奇數行必須具有灰色背景色，但除了第一和第四列白色背景色 – Racana

嘗試這希望對你有幫助。

<style> 
tr:nth-child(even) { 
    background-color: red; 
} 
tr:nth-child(odd) { 
    background-color: blue; 
} 
table tr:first-child, table tr:last-child { 
    background:none; 
} 

</style>

來源

2016-01-20 13:38:21

更改第二列和第三列和奇數行的背景顏色

回答

相關問題