当前位置:首页 > 默认

css3选择器之nth-child的用处

喵斯基8年前 (2018-03-21)默认3826

在做前端到时候,尤其是列表输出的时候,经常会遇到需要最后一个样式不一样的。比如li元素的float,我要做2列或3列,如果做了间隔,比如margin-right:10px;那么输出的所有li都会带上这个margin-right,但是在对其的时候,会发现你会无法对齐最顶部的UI,要处理这种情况,以往的方法是,将li的父元素,比如ul元素加长10px,然后再把ul的父元素做一个overflow:hidden。

不过,我们会有更好的办法,比如用到css3里面的选择器,比如这个nth-child,打比方我是3列布局,那么最后一列是不需要margin-right的,这个时候,我们可以这样写,li:nth-child(3n){margin-right:0px;}这个括号里面的3n的意思就是3的倍数,比如6、9、12等等。

不过,这一方法只是用于css3,如果浏览器不兼容,还是老老实实用第一种方法吧


扫描二维码推送至手机访问。

版权声明:本文由前端笔记发布,如需转载请注明出处。

本文链接:https://www.chex.com.cn/default/33

标签: css3前端
分享给朋友:

“css3选择器之nth-child的用处” 的相关文章

口腔溃疡贴意可贴没卵用

口腔溃疡贴意可贴没卵用

上周吃个饭,把舌头咬破了,然后没几天,破损处就变成口腔溃疡了。看了网上很多帖子,说是口腔溃疡的生成机制至今不明,纯属胡说八道,反正我每次口腔溃疡,基本都是口腔破损引起。所以说口腔溃疡原因不明的,滚粗。伪专家。然后,是意可贴,这玩意儿,其实并没卵用,最多就是好缓解症状,不会被触碰而已,化了就没用了,就…

关于焦虑

关于焦虑

做互联网的,焦虑的人群有很多,比如我,最近就很焦虑。我的焦虑来源于多方面的,一方面是对自己的管理能力提升缓慢;另一方面又是对自己专业技能的不满;此外,还有对自身收入水平长期处于缓慢增长状态的不满。焦虑是一个概括性的词语,其中包括多种情绪的混杂,比如:着急、不安、没有安全感、惆怅、紧张、恐慌,等等。人…

外国有超级英雄,我们中国就没有?

外国有超级英雄,我们中国就没有?

今天同事感慨:你看人家外国,有辣么多的超级英雄,我们中国呢,有什么英雄?听到这个,心里很不是滋味,当下就反驳道:谁说中国没有超级英雄,很多好不好,然后例举历史上的各种英雄。人回答:太遥远了。那就例举身边的吧:赖宁、雷锋。这些都是平凡的英雄。回答说他们不是超级英雄。好吧,原来你们要的是一些虚无缥缈的英…

WizTree:比SpaceSniffer更好使的磁盘清理小助手

WizTree:比SpaceSniffer更好使的磁盘清理小助手

之前的文章中写过一篇《小众软件之SpaceSniffer——找到占用硬盘的元凶》的文章,当时对这款软件还是很满意的,不过因为是单文件的原因,有时候运行的时候会弹出很多对话框(因为权限的原因,非管理员权限运行无法查看系统文件,必须用管理员权限运行),使用体验上并不是那么好。…

城区发现一例确诊病例,完蛋了,回不去了

城区发现一例确诊病例,完蛋了,回不去了

城区发现一例确诊病例,当天还送小孩去学校了,估计,她小孩的同学们都要做重点监控了。唉,完蛋了,回不去了…

最近在开发一个zblog下载站的模板,网站很大,你忍一下

最近在开发一个zblog下载站的模板,网站很大,你忍一下

没有要蹭热点的意思,牙签太小,蹭起来多没意思。刚开始也没想过这个模板有这么大,直到越做越发现这特么的是一个大型下载站,某些分类有三级,某些分类两级,我发现刚开始都是凭一股热情,因工作繁忙,开发已经一个月了,页面初具模型,现在要做的就是把细节打磨一下。还有大量的地方需要优化的,嗯,做好了准备拿来卖。然…