为第一个表行创建CSS，替换其他表
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为第一个表行创建CSS，替换其他表相关的知识，希望对你有一定的参考价值。
我有一个从另一个应用程序/服务生成的表，我无法修改其布局。我想要CSS第一行有一个样式，然后其他行有交替的样式。主要问题是关于标题和其他行的html没有区别。
<table id="t01">
<tr>
<td>Firstname</th>
<td>Lastname</th>
<td>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
我在CSS中看到像table > tr:n-child(odd)这样的东西，但那些不起作用。有没有办法让我说“tr：nth-child（ODD EXCEPT WHEN = 1）”？
任何帮助是极大的赞赏。这是我想要完成的事情的快照。
编辑：解决方案
这是我解决的解决方案。关键是将first-child选择器放在nth-child(2n + 1)选择器之后，因此标题样式将覆盖迭代样式。我可能会看看:not选择器，但我想再次滚动。
div#tablewrappingdiv> table > tbody tr:nth-child(2n+1) > td{
background-color: #eee;
}
div#tablewrappingdiv> table > tbody > tr:first-child > td{
background-color: #006c00;
}
div#tablewrappingdiv> table > tbody > tr:nth-child(2n + 2) > td{
background-color: #d8e4bc;
}
看看Selector Reference for nth-child：
tr:first-child {darkgreen} (nth-child(0) would also work)
tr:nth-child(2n+2) {white}
tr:nth-child(2n+3) {lightgreen}
使用公式（an + b）。描述：a表示循环大小，n是计数器（从0开始），b是偏移值。
在这里看到它：https://jsfiddle.net/z8xhs0h1/
对于这个相当简单的情况（偶数/奇数，第一个不同），请看看this answer。它稍微容易阅读，并说你只需要将first-child规则放在最后：
tr:nth-child(even) {white}
tr:nth-child(odd) {lightgreen}
tr:first-child {darkgreen} (overrides white color)
但是，对于更复杂的情况或者你想要非常明确的情况，an+b规则可以非常灵活。
你也可以利用这样的东西。
- 我们需要替换偶数行和奇数行，使用
nth-child(even/odd)选择器非常合适。 - 因为我们想要
exclude the first row（这是一个奇数）你可以使用:not(:first-child) selector with the odd attribute。
#t01 tr:first-child{
background:yellow;
}
#t01 tr:nth-child(even){
background:red;
}
#t01 tr:nth-child(odd):not(:first-child){
background:green;
}<table id="t01">
<tr>
<td>Firstname</td>
<td>Lastname</td>
<td>Age</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>您可以使用如下所示的tr:first-child，tr:nth-child(2n+2)和tr:nth-child(2n+3)，其中“nth-child（2n + 3）”表示“从第三个开始的每隔一个孩子”：
tr:first-child {
background: #fa0;
}
tr:nth-child(2n+2) {
background: #a0f;
}
tr:nth-child(2n+3) {
background: #0eb;
}<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>以上是关于为第一个表行创建CSS，替换其他表的主要内容，如果未能解决你的问题，请参考以下文章