如何为在它之前有相邻项目的每个元素设置样式？

在CSS中，我们经常需要为列表或者其他元素中的相邻项目设置不同的样式。这时候，我们可以使用CSS伪类来实现这个目的。其中，:first-child、:last-child和:nth-child()是最常用的伪类之一。

:first-child 伪类

:first-child 伪类用来选择某个元素的第一个子元素。比如下面的样式会将 ul 元素中的第一个 li 元素的颜色设置为红色。

ul li:first-child {
  color: red;
}

:last-child 伪类

:last-child 伪类用来选择某个元素的最后一个子元素。比如下面的样式会将 ul 元素中的最后一个 li 元素的颜色设置为红色。

ul li:last-child {
  color: red;
}

:nth-child() 伪类

:nth-child() 伪类用来选择某个元素的特定位置的子元素。其中最常用的是:nth-child(even) 和 :nth-child(odd)。:nth-child(even)选择某个元素中所有位置为偶数的子元素，:nth-child(odd)选择某个元素中所有位置为奇数的子元素。 下面的样式会将 ul 元素中所有位置为偶数的 li 元素的颜色设置为红色。

ul li:nth-child(even) {
  color: red;
}

还可以在 :nth-child() 中传入一个公式，比如 :nth-child(3n+1)，意思是选择所有位置为3的倍数加1的子元素。下面的样式会将 ul 元素中所有位置为3的倍数加1的 li 元素的颜色设置为红色。

ul li:nth-child(3n+1) {
  color: red;
}

除了上面三种伪类以外，还有一些其他的伪类可以用来选择子元素。具体可以参考CSS规范或者其他CSS教程。