css3选择

在一些项目中，我们常常需要实现选择类似于3的倍数的位数的元素，或者从第n个之后的元素，或者从第n个到第m个元素这种类型的选择，如果说在以前，想完全通过css实现，似乎是天方夜谭，根本不可能实现，CSS3的出现，给我们提供了类似的选择器，但是又有多少人能够真正通过CSS3选择器实现这些功能呢？

下面，列举几种类似的选择器：

1、选择第一个元素

ul li:first-child{}

　　这个是css3直接提供的选择器，相对应的就有选择最后一个

2、选择最后一个元素

ul li:last-child{}

3、选择从第m个到最后一个元素，包括第m个元素

ul li:nth-child(n+m){}

4、选择倒数第m个元素

ul li:nth-child(-n+m){}

5、选择从第start个元素到第end个元素

ul li:nth-child(n+start):nth-child(-n+end){}

6、选择所有元素，除了第m个

ul li:not(:nth-child(m)){}

7、选择3的倍数的元素

ul li:nth-child(3n){}

　　

这其中，如果能够了解:nth-child和:nth-of-type的区别的话，可以实现更多有意思的选择，是不是按捺不住了？

赶紧试试吧！

　

转载于:https://www.cnblogs.com/zhuhuoxingguang/p/7717333.html