css 列表隔行换色

CSS 列表隔行换色

ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
}
li:nth-child(even) {
      background-color: #f2f2f2;
}

在我们的网页中经常会使用列表来呈现信息或者内容，但是当列表过长时，往往有些眼花缭乱。那如何给列表加上一些额外信息，使得读者更容易分辨其中的每个项目呢？这时候就需要我们使用 CSS 的技巧了！

使列表项隔行换色是一种简单又易于阅读的方式。这个技巧其实很简单，在 CSS 中，我们可以使用伪类选择器 :nth-child(even)和 :nth-child(odd) 来选择奇数行和偶数行。此技巧同样适用于 ol（有序列表）。

li:nth-child(odd) {
        background-color: #FFF;
 }
li:nth-child(even) {
        background-color: #F2F2F2;
 }
    

其中,偶数行的背景色是 #F2F2F2， 奇数行的背景色是白色(#FFF)。 这样，在那些有很多列表项的网页，这个隔行换色技巧能够使得每个项目都更加清晰地呈现出来。

最好的是，这个技巧非常简单。 只需在 css 中添加一个小小的代码段就好了，它会为您网站的用户提供额外的阅读帮助，大大提高您网站的可读性。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！