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

css3选择器之nth-child的用处

喵斯基7年前 (2018-03-21)默认2754

在做前端到时候,尤其是列表输出的时候,经常会遇到需要最后一个样式不一样的。比如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,如果浏览器不兼容,还是老老实实用第一种方法吧


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

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

本文链接:http://www.aowowo.com/default/33

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

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

该死的dg597服务让我windows假死

该死的dg597服务让我windows假死

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

通过windows日志检查系统故障

通过windows日志检查系统故障

前两天,该死的dg597服务让我windows假死问题折腾了我半天,后来通过windows日志检查了下,发现除了dg587服务外,其他问题也出现了。比如这个:> 应用程序-特定 权限设置并未向在应用程序容器 不可用 SID (不可用)中运行的地址 LocalHost (使用 LRPC) 中的用...

节后开工 大吉大利

节后开工 大吉大利

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

typecho加载还是太慢

typecho加载还是太慢

本来是看中了typecho的小巧的,无奈加载速度还是不太理想,如果不是作为一个记录笔记的小站,还真想换掉这个系统。跟另外一个zblog的系统两相对比,瞬间觉得还是typecho要好用,虽然模板也就那样,但也还凑合。至少不像zblog那般加载慢得要死。最近搞了几个项目,前端实在是想不到有什么好创意,然...

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

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

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

关于焦虑

关于焦虑

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