问答详情
源自:6-8 CSS3 结构性伪类选择器—nth-child(n)

还是不太懂?

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

  background: green;

}

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

提问者:ZXJ03 2016-06-06 15:14

个回答

  • Just90
    2016-07-04 17:13:32

    楼上的慕友对表达式的理解说得很对了。这里补充一点思考的方向,对于后面区别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://img.mukewang.com/577a2867000153ab12540740.jpg

    2. 截图展示:

    http://img.mukewang.com/577a28b800012dd004630477.jpg

  • 发粪涂墙的游小鸡
    2016-06-18 10:02:53

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

  • 相相子
    2016-06-06 16:16:29

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