Question

我正在制作一个合并第一列中的行的表，所以当我尝试在奇数行上给它一些类似背景颜色的样式时，第一列不能正常工作，

我正在使用

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

要使偶数行变灰，但我需要避免使用第一列和最后一列

一切顺利！

（编辑）的

Answer 1

您可以使用：not（：first-child）来避免这些元素（对于td和/或th）。见下文

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

Answer 2

您应该为第一行和最后一行添加其他属性，如下所示：

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

Answer 3

＆＃13;

<!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>

＆＃13;

Answer 4

试试希望帮助你。

<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>

更改第2列和第3列以及奇数行中的背景颜色

4 个答案: