HTML中nth-child()的使用方法
的有关信息介绍如下:
HTML可以使用nth-child()方法来代表第几个,下面我们以下面简单的例子来说明
在body中建立一个ul标签
- 早
- 上
- 不
- 知
- 归
- 处
然后在head中对其添加属性清除命令,
ul{margin:0;padding:0;list-style:none;width:800px;margin:100px auto;border:solid 1px red;}
然后添加对li的修饰,对其添加浮动效果,为方便效果展示,前期将描边添加上,后期可根据需要撤销;因为添加了对Li的浮动,在父集ul中添加overflow:hidden;去除浮动效果。
ul li{float:left;width:100px;height:100px;border-radius;50%;border:solid 1px red;margin:10px;line-height:100px;text-align:center;}
将内容区修饰完成后,打开预览效果查看,如图所示
然后开始对第一个li设置背景颜色以及字体颜色,
ul li:nth-child(1){background-color:blue;color:white;}
如图所示
第一个设置完成后,开始对第二个方块进行设置,第二个方块就是:nth-child(2){};代码如下
ul li:nth-child(2){background-color:aqua;color:red;},浏览器中查看效果,如图所示
剩下的设置方法相同,child后面的数字是几,就代表是第几个选块,然后分别设置背景颜色和字体颜色
,效果如图所示。



