夏易网络

您的当前位置:首页 > 新闻动态 > 网站建设学堂 >

CSS3伪类选择器nth-child选择奇数偶数和3的倍数个元素写法

2021-03-11 00:27:57   来源:夏易网络   评论:0 点击:
在网站开发过程中,我们经常有对列表的奇数或者偶数以及3倍数的元素进行单独设置样式的需求,通过CSS伪类选择器nth-child我们就可以轻松的实现,没有必要再在程序里判断,从而可以精简代码。

选择奇数列元素的写法:

ul li:nth-child(2n+1){ background-color:#eee}  也就是ul里的第1、3、5、7、9.....个li元素

选择偶数列元素的写法:

ul li:nth-child(2n){ background-color:#eee} 也就是ul里的第2、4、6、8、10.....个li元素

选择3倍数列元素的写法:

ul li:nth-child(3n){ background-color:#eee} 也就是ul里的第3、6、9、12、15.....个li元素

以此类推 4倍数列就是4n,5倍数列就是5n,通过n我们还可以根据自己的实际情况自己写公式以实现我们的需求。

查看更多的伪类选择器 请点击 《CSS3选择器集合


新闻动态
网站建设学堂
网站优化学堂
网络行业新闻
夏易网络动态
推荐文章
如何查看网站哪些图片或文件影响网站打开速度?
如何让网站打开速度更快之图片压缩
大型企业网站建设需要注意的几个问题
高端企业网站建设PK低端企业网站建设
网站SEO优化是什么意思?