[分享]css中even是什么意思

CSS中的even是什么意思？在CSS中，even是一个伪类，它用于匹配列表或表格中的偶数项。假设你有一个无序列表： 第一项 第二项 第三项 第四项 第五项 第六项 现在你想对所有偶数项应用样式，比如...

CSS中的even是什么意思？

在CSS中，even是一个伪类，它用于匹配列表或表格中的偶数项。

假设你有一个无序列表：

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  <li>第四项</li>
  <li>第五项</li>
  <li>第六项</li>
</ul>

现在你想对所有偶数项应用样式，比如将它们的背景颜色设置成淡灰色。你可以使用even：

li:nth-child(even) {
  background-color: #f2f2f2;
}

这样，第二项、第四项和第六项的背景颜色就会变成淡灰色。

在表格中使用even更加常见。假设你有一个表格：

<table>
  <tr>
    <th>姓名</th>
    <th>年级</th>
    <th>班级</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>一年级</td>
    <td>2班</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>二年级</td>
    <td>3班</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>三年级</td>
    <td>4班</td>
  </tr>
  <tr>
    <td>赵六</td>
    <td>四年级</td>
    <td>5班</td>
  </tr>
</table>

现在你想将表格的偶数行背景颜色设置为淡灰色。这就可以使用even：

tr:nth-child(even) {
  background-color: #f2f2f2;
}

这样，表格中第二行和第四行的背景颜色就会变成淡灰色。

总之，CSS中的even就是用来匹配列表或表格中的偶数项的伪类。使用even时，要注意它只匹配偶数项，也就是说第一项是不会被匹配的。