更改第二列和第三列和奇数行的背景颜色

我正在制作一个合并第一列中的行的表，所以当我试图给它一些奇数行上的背景颜色样式时，第一列没有正常工作，更改第二列和第三列和奇数行的背景颜色

我使用

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

更改第二列和第三列和奇数行的背景颜色

回答

相关问题