为列表元素的前 N 项设置自定义样式

[Dream4ever]

需求描述

上图这种列表前3项与后面各项的样式不同，是如何实现的呢？

解决过程

首先，如果要让列表中的各项样式相一致，那很简单，HTML 中设置统一的 class，然后在 CSS 中为这个类设置字号、颜色等等属性。

其次，要想为列表的前三项设置不同的样式，可以用 :nth-child() 这个 CSS 属性，比如 .item:nth-child(1) 就会选择类名为 item 的一组相邻节点中的第一个节点。

另外，由于前三个节点的部分 CSS 设置是通用的，比如字体、字号，以及背景图片的部分设置，那么就可以用 .item:nth-child(-n+3) 来选择类名为 item 的一组相邻节点中的前三个节点。

此外，上图中前三名的奖牌图标是自己做的，如果要和文字对齐，那么奖牌图标中同心圆的圆心要和文字的中心对齐。水平方向上对齐很简单，因为图片是左右对称的，设置背景图片居中即可。

而垂直方向上想要对齐的话，就需要做一点变通了。在奖牌图标中，同心圆的下方是一个绶带，如果照着原样做一个图标出来，那么这个图片文件垂直方向上的中点肯定不是同心圆的圆心，所以就需要再做一个绶带，对称地放到同心圆的上方，但是把它设置为透明。这样一来，这个图片在垂直方向上的中心就也是同心圆的圆心了，把这个图片作为文字的背景显示出来，就可以完美地实现两者在水平和垂直方向上都居中了，perfect！

后记

编程这件事很好玩，因为总是能学到新知识，而且可以立刻就用起来，这种成就感实在是太棒了。另外像自己这种什么都需要做，也是挺锻炼人的，比如上面说的，自己设计一个图标作为页面元素的背景图，如何能让背景图与文字在水平和垂直方向上都居中，就需要好好地思考一下。CSS 很难实现，那就可以从另一个角度另辟蹊径，同样能解决问题。我们也要注意自己的思维定式，为了解决一个问题，不一定非要局限于某种技术，跳出自己的局限之外，就会发现广阔天地，大有可为。

与大家共勉~