为第一行创建 CSS，替换其他行答案

【问题标题】：Create CSS for first table row, alternate others为第一行创建 CSS，替换其他行
【发布时间】：2017-12-21 07:07:41
【问题描述】：

我有一个表格，它是从另一个我无法修改其布局的应用程序/服务生成的。我想要第一行有样式的 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;
}

【问题讨论】：

"我希望 CSS 的第一行有一个样式，然后其他行有交替的样式" 那么，具体来说，是什么阻止了您实现这一目标？通常，当人们在这里寻求帮助时，他们会展示他们的尝试。请包括一些CSS；你已经表示你已经尝试了一些东西，但它们并不完全有效......如果我们看到它，我们可以帮助它工作。但我们不太可能为您从头开始编写。
@TylerH 我不是要从头开始写东西，我是在问方向。“我怎么去那里”不同于“带我去那里”。
当您可以提供有关起点的一些信息时，路线是最有用的。例如，如果我告诉您如何到达埃菲尔铁塔，我需要知道您是从斯巴达堡还是巴黎出发。而且，作为巴黎游客中心，如果您可以自行管理，我们宁愿不向您提供有关如何离开社区和前往当地机场的详细信息。
请记住您选择的解决方案的缺点，如果您将许多样式属性添加到您的 2n+1 tr，您必须通过更改它们在第一个孩子中的值来覆盖它们即使您根本不希望在其上应用任何样式，也使其看起来不同。只需添加 :not(:first-child) 即可避免这一切。
@FlexFiend 一开始我对规则的偏移量犯了一个错误（对基于 0 的索引与基于 1 的索引感到困惑）。不要使用+1 和+2，而是使用+2 和+3。这将使行着色仅在标题之后开始，并且规则的顺序不再重要。我相应地更正了我的答案。这是jsfiddle

标签： html css css-selectors

【解决方案1】：

看看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 规则可以非常灵活。

【讨论】：

只是一个提示，如果您要使用偶数/奇数选择器，最好不要尝试通过稍后放置第一个孩子来覆盖奇数选择器。您必须提及该属性的每个属性，以使其看起来与奇怪的选择器属性不同，而您应该尝试类似我的解决方案来解决该场景。
好点。我通常也不喜欢覆盖属性。虽然有时，这种覆盖可以提高可读性，例如，如果您只想更改一些属性但保持大多数属性不变。我认为，为特定案例找到最佳/最简单/最可维护的解决方案是关键。

【解决方案2】：

你也可以使用这样的东西。

我们需要替换偶数行和奇数行，在这里使用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>

【讨论】：

【解决方案3】：

您可以使用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>

【讨论】：