当前位置:首页 > 默认 > 正文内容

css3选择器之nth-child的用处

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

在做前端到时候,尤其是列表输出的时候,经常会遇到需要最后一个样式不一样的。比如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.aowowo.com/default/33

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

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

折腾了一下服务器,貌似现在还不错

折腾了一下服务器,貌似现在还不错

RT,折腾了一下,现在服务器要好很多了,以前用的是lnmp,所有操作都需要在命令提示符下操作,对于我来说,还是太难了点。好在找到了一个不错的东东,网页版的控制面板就可以完成所有的操作。果然视觉才是生产力。...

昭昭前事 惕惕后人

昭昭前事 惕惕后人

昭昭前事 惕惕后人那年乱世如麻,愿你们来世拥有锦绣年华。1937-2017如果有一天我们能相遇,我一定会告诉你,山河犹在,国泰民安感谢@铲屎官漫画的@朱-彦...

该死的dg597服务让我windows假死

该死的dg597服务让我windows假死

最近几天,工作一直正常稳定的Windows10总是莫名其妙假死,打开windows的事件查看器发现一溜的红色感叹号,逐个点开看发现了不少莫名其妙的服务,比如这个dg597,这个服务是dgbased服务,也就是驱动精灵的。启动失败超时30000毫秒,然后假死。还有那个什么迅雷的XLServicePla...

layui前端/后端UI框架初体验

layui前端/后端UI框架初体验

昨天下载了layui的前端/后端UI框架,浅尝了一下。感觉还不错,与bootstrap相比,有似曾相识的感觉。用起来也比较得心应手,不过还需要一段时间熟悉。虽然跟bootstrap差不多,不过还是有一些区别。其实对于框架的使用,我还是很欢迎的,尤其是去构建一些比较大的站点的时候,框架可以规范你的代码...

良好愿望与残酷现实

良好愿望与残酷现实

常常在一些媒体上看到一些报道:xx因xx走红,如今却如何如何。然后底下一大堆人发表留言说应该如何如何,要善待如何如何。说实话,曾经也会有这种感慨,尤其是人生无常。但是转念一想:这不就是人生么。你所期许的被善待,映射的就是你所经历的现实。人们看新闻,容易产生代入感,但那毕竟只是别人的人生。自己的选择,...

用Word写文章发布到zblog

用Word写文章发布到zblog

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