头闻号

汕头市澄海区雅威日用化工厂

化妆品套装|洗发精|沐浴液|护肤膏霜|洗面奶|护肤乳液

首页 > 新闻中心 > 科技常识:关于CSS nth
科技常识:关于CSS nth
发布时间:2024-12-23 18:37:11        浏览次数:3        返回列表

今天小编跟大家讲解下有关关于CSS nth-child( ) 的特殊使用 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关关于CSS nth-child( ) 的特殊使用 的相关资料,希望小伙伴们看了有所帮助。

背景:

最近开发的时候遇到一个样式问题,一个li列表浮动排列,需要将除了前4个其他的li的style加上margn:0;

首先想到一个一个nth-child(5)、nth-child(6)、nth-child(7)... 很快觉得这个方法太傻了=。=!

想想后决定利用nth-child()可以使用变量n 的功能来实现这个需求。

方法如下:

.module_item:nth-child(n+5){ margin: 0;}

灵活利用nth-child 的变量n 加上 + - * / 可以实现很多样式需求。

来源:爱蒂网