[分享]css中如何让小图标各行变色

CSS中的小图标在很多网页设计中扮演了重要的角色，但是如何让它们各行变色呢？下面我们来看看具体实现方法。.iconrow { display: flex; justifycontent: spaceb...

CSS中的小图标在很多网页设计中扮演了重要的角色，但是如何让它们各行变色呢？下面我们来看看具体实现方法。

.icon-row {
  display: flex;
  justify-content: space-between;
}

.icon-row i {
  font-size: 24px;
}

.icon-row:nth-of-type(odd) i {
  color: #F7797D;
}

.icon-row:nth-of-type(even) i {
  color: #4ECDC4;
} 

首先，我们需要在HTML中定义一个class名为 icon-row 的容器，然后使用 flex 布局来实现图标在容器中的水平分布，可以使用 justify-content 属性来控制图标的对齐方式。

接着，我们定义一个 i 标签，用于放置我们的小图标。为了方便后续样式的应用，我们可以为其定义一个统一的字体大小。

最后，我们使用伪类选择器 :nth-of-type(odd) 和 :nth-of-type(even) 来设定奇数行和偶数行的图标样式。这里我们分别定义了两种不同的颜色，并用 color 属性来实现。

综上所述，使用上述方法能够为小图标实现每行不同的颜色变化，使得页面更加美观，增强用户体验。