nth-first-child（HTML中nth-child（）的使用方法）

大家好，张承辉来为大家解答以上问题。nth-first-child，HTML中nth-child，的使用方法很多人还不知道，现在让我们一起来看看吧！

1、 在正文中创建ul标签

2、 保险商实验所

3、 上午/李

4、 开/李

5、 李/李

6、 认识/李

7、 李鬼/李

8、 李/李

9、 /ul

10、 然后在头部添加一个属性清除命令，

11、 风格

12、 ul { margin:0padng:0list-style : none；宽度width:800pxmargin:100pxautoborder : solid 1 pxred；}

13、 /风格

14、 然后加上李的装饰，加上漂浮的效果。为了效果展示的方便，前期增加了笔画，后期可以根据需要取消。添加溢出：隐藏在父集合ul中，因为Li是浮动的；移除浮动效果。

15、 ulli { float:left宽度width:100pxheight:100pxborder-raus；50%;border : solid 1 pxred；保证金：10 px；行高height:100pxtext-align : center；}

16、 装饰完内容区域后，打开预览效果，如图。

17、 然后开始为第一个li设置背景色和字体颜色，

18、 ulli :n th-child(1){ background-color : blue；颜色：白色；}

19、 如图所示

20、 第一次设置完成后，开始设置第二个方块，即：n th-child(2){ }；代码如下所示

21、 ulli :n th-child(2){ background-color : aqua；颜色：红色；}，在浏览器中查看效果，如图

22、 剩下的设置方法都一样，child后面的数字表示选中了哪个块，然后分别设置背景色和字体颜色。

23、 ，效果如图。

本文到此结束，希望对大家有所帮助。