css 节点选取

 （n默认为0）

• 1

选择3\6\9等三倍数行

○	○	●	○	○	●	○	○	●	○
1	2	3	4	5	6	7	8	9	10

ul.list li:nth-child(3n){background: #000;}

 

选择2\5\8等三倍数行
○    ●    ○    ○    ●    ○    ○    ●    ○    ○
1    2    3    4    5    6    7    8    9    10
 

ul.list li:nth-child(3n+2){background: #000;}

1
选择1\4\7\10等三倍数行
●    ○    ○    ●    ○    ○    ●    ○    ○    ●
1    2    3    4    5    6    7    8    9    10

ul.list li:nth-child(3n+1){background: #000;}

1
通过上面几个例子,应该对倍数行,这种需要,全部理解了吧,再来一个例子

选择 5\10 等五倍数行
○    ○    ○    ○    ●    ○    ○    ○    ○    ●
1    2    3    4    5    6    7    8    9    10

ul.list li:nth-child(5n){background: #000;}

1
下面来点高级的

选择第三个到第九个之间的奇数行(不包括3\9)
○    ○    ○    ○    ●    ○    ●    ○    ○    ○
1    2    3    4    5    6    7    8    9    10
怎么做呢?看好了

ul.list li:nth-child(2n+1):nth-child(n+4):nth-child(-n+8){background: #000;}
1
好,就是组合上面的多种条件,来达到我们需要的选择范围.

选择第三个到第九个之间的奇数行(包括3\9)
○    ○    ●    ○    ●    ○    ●    ○    ●    ○
1    2    3    4    5    6    7    8    9    10
ul.list li:nth-child(2n+1):nth-child(n+3):nth-child(-n+9){background: #000;}
1
通过上面的两个例子,应该学会了,怎么样组合多种条件,来选择了.

再复杂一点

选择3位倍数+1的(1/4/7/10),其中的偶数
○    ○    ○    ●    ○    ○    ○    ○    ○    ●
1    2    3    4    5    6    7    8    9    10
ul.list li:nth-child(3n+1):nth-child(2n){background: #000;}
1
nth-child总结
通过上面的各种例子,相信大家把没个例子都实践一遍之后,就能够深入的理解了.在实际的项目中,多多去运用,那么,便会逐渐的了然于胸了.

重要的是,理解它的语法,再结合你的需求,就基本能解决问题了.

此类选择器拓展
提问,在不知道一共有多少个的情况下,如何选择最后两个??

当你对上面的知识点,了然于胸后,是不是大大的有成就感呢?那么,你知道上面这个问题应该怎么解决吗?

如何选择最后两个
○    ○    ○    ○    ○    ○    ○    ○    ●    ●
1    2    3    4    5    6    7    8    9    10
好吧,这个,是无法使用 nth-child这个选择器来解决的.

我们需要换一个选择器,这个选择器就是 nth-last-child.

nth-last-child选择器的用法,和 nth-child 选择器的用法是完全一致的,只有一个不同,那就是 nth-child 是从第一个开始计数的,而nth-last-child是从倒数第一个开始计数的

那么上面的问题,就有答案了.

ul.list li:nth-last-child(-n+2){background: #000;}
1
如何实现反选?
什么是反选,举例,我要选择除了1\4\7\10等三为倍数的数字之外的其他选项,如下表所示:

○    ●    ●    ○    ●    ●    ○    ●    ●    ○
1    2    3    4    5    6    7    8    9    10
好玩了,这里我们需要再引入一个新的选择:not()

代码如何实现呢?

ul.list li:not(:nth-child(3n+1)){background: #000;}
1
把你的条件,放在:not()的括号当中,就能够实现选择了.

好,我们再换一个例子.我们选择除了最后一个的其他所有.

用反选的方法选择除了最后一个的其他所有.
●    ●    ●    ●    ●    ●    ●    ●    ●    ○
1    2    3    4    5    6    7    8    9    10
方法1

ul.list li:not(:nth-last-child(1)){background: #000;}
1
方法2

ul.list li:not(:last-child){background: #000;}
1
方法2为简写的方法.方法1为原理性写法.
————————————————
版权声明：本文为CSDN博主「zhuanghw全栈工程师」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zhw0596/article/details/79791423