当前位置:首页 > 默认

css3选择器之nth-child的用处

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

在做前端到时候,尤其是列表输出的时候,经常会遇到需要最后一个样式不一样的。比如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的用处” 的相关文章

网站恢复,网上下载的模板靠不住啊

网站恢复,网上下载的模板靠不住啊

昨天打开网站,结果发现网站被攻破,网站被删,还留了个病毒文件,唉~可能是权限和模板的问题,我现在换成默认模版和不打开写权限看看。…

节后开工 大吉大利

节后开工 大吉大利

今天正式开工了,节后综合征有点难受。尤其是来回开车,每次都是十几个小时,腰吃不消哇。回去的时候,在广东境内堵了一小段,总之情况都还好,只是晚上开车有点吃不消,咖啡喝太多,结果第二天早上人就有点发抖。赶紧在找个地方停车,歇息了一阵,被冷风一吹,好多了。我表弟非得跟着坐车回去,下车第一个体会就是,坐车回…

思想懒惰导致的行为懒惰

思想懒惰导致的行为懒惰

碎片化的当下,越来越没有太多整块整块的时间来阅读、思考、写作。于是思想开始懒惰起来,喜欢看碎片化的、快餐式的,能够即时满足的东西。在这种情况下,行为也开始变得懒惰起来,对很多东西,很多事物提不起兴趣————因为需要付出才能得到结果————甚至某些付出不一定有结果,这样就导致了一个恶性循环:因为没结果…

Windows10专业版安装不了Dolby Access,我这么干,装上了!

Windows10专业版安装不了Dolby Access,我这么干,装上了!

之前笔记本自带的系统是家庭版,有Dolby Access,不过后来手贱,安装了Windows10专业版,结果没有找到Dolby Access,今天突发奇想,打算安装一下,付个费。结果左右就是安装不了,一百度,发现还真有这样的问题,不过网上的解决方案我试过了,不行。正在我束手无策之际,突发奇想:会不会…

这个站是typecho做的,到底改不改zblog呢?

这个站是typecho做的,到底改不改zblog呢?

这个站点断断续续的,写写停停的,也有三年了。之前选择typecho的目的是希望更纯粹一些,写作就好好写,但是人有时候就是这样,不想写的时候怎么都写不下去。违背了初心,不想写的原因有很多,一方面是觉得自己没有那个输出的能力了;二一个就是自己变懒了,没有了年轻时候的那种冲劲————十多年前,自己能够一天…

用Word写文章发布到zblog

用Word写文章发布到zblog

相信有不少人用zblog建站写东西,尤其是那些喜欢自己写点东西的人,直接在线写当然方便,但是有时候你在工作的时候写东西,多少是不好的。如果有一个客户端,那是相当的方便的,可惜现在写博客的人越来越少,这类的客户端也销声匿迹了。之前的Windows live write 挺好用,结果停止更新了。不过,我…