nth-child()教辅中的代码问题

nth-child()教辅中的代码问题

http://img1.sycdn.imooc.com//climg/5d82be310979a44507960485.jpg百度了下:nth-child表示匹配其下的子元素:nth-child(Xn+Y)表示从第Y个开始,递增X则可以有:nth-child(3n+10)表示从第10个开始,10,13,16,19……:nth-child(3n)则Y=0,可省略,表示从0开始,0,3,6,9……

那么:nth-child应该是nth-child(3n

+2)才可实现下面网页所示的第二个元素标红开始,而源代码中

nth-child(3n

+0)是从第0个开始往后第3个第6个...


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕星星 2019-09-19 12:13:43

同学你好,

理解的有点问题哦,这个选择器是看所有子元素在父元素中的顺序,而不仅仅是同一种元素的顺序哦。教辅中代码没有问题,除了要计算后面的3n+0,还要看前面的元素是否匹配。

例如:

nth-child的值从1开始的,所以3n+0这种写法,第一个值为0没有条件符合。

下一个值为3 ,在body子元素中第三个元素是p,符合条件,要将第一个h1标签也要算进去。

后面以此类推。

自己可以测试理解下,祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师