为了账号安全,请及时绑定邮箱和手机立即绑定

还是不太懂?

ol>li:nth-child(2n+1){

  background: green;

}

可以理解为父元素第2n+1个ol>li元素,背景变绿吗?

正在回答

3 回答

楼上的慕友对表达式的理解说得很对了。这里补充一点思考的方向,对于后面区别nth-child与nth-of-type,last-child与last-of-type,first-child与first-of-type有帮助!这里分析nth-child与nth-of-type,这样对于last-child与last-of-type,first-child与first-of-type就很容易理解了!当看到使用nth-child与nth-of-type选择器时,我们首先要找到他的父元素,child是子(子元素),nth-child表示父元素下的某一子元素,type(类型)是父元素下的同一类型的某一元素!本题中ol>li:nth-child(2n+1)对于li使用了nth-child(2n+1),我们首先找到li的父元素,当然是ol咯(>是子元素选择器,更加清楚地已经说明了这一点),再找到ol下满足nth-child(2n+1)条件的li元素,即第奇数个li元素。如果这里使用ol > li:nth-of-type(2n+1),结果相同,但意义不同,是因为ol下只有li元素。若ol下第二个子元素是p元素的话,ol > li:nth-of-type(2n+1)将选择第1、4、6、8、10个子元素,ol > li:nth-child(2n+1)将选择第1、3、5、7、9个子元素。附上两张图说明:

1. 代码展示

http://img1.sycdn.imooc.com//577a2867000153ab12540740.jpg

2. 截图展示:

http://img1.sycdn.imooc.com//577a28b800012dd004630477.jpg

2 回复 有任何疑惑可以回复我~

我们来一点点解析代码,ol>li代表的是ol子元素中的li,通俗一点理解,就是ol下的儿子li,不是孙子什么的,接下来nth-child(),括号中表示要选中的,n你可以理解为第一个是0,然后慢慢+1,第一次0+1=1,第二次2+1=3,以此类推,发现都是奇数,也就是我们说的单数被选中了,那么他就被改变了。同理,如果是2n-1,那就是偶数。你理解的倒过来说了,应该是ol>li元素中2n+1位置的子元素改变样式。

2 回复 有任何疑惑可以回复我~

是li的奇数行背景变成绿色

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
十天精通CSS3
  • 参与学习       242011    人
  • 解答问题       2623    个

本课程为CSS3入门教程,深刻详解CSS3知识让网页穿上绚丽装备

进入课程

还是不太懂?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信