当前位置:首页 > 默认

css3选择器之nth-child的用处

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

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

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

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

typecho加载还是太慢

typecho加载还是太慢

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

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

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

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

良好愿望与残酷现实

良好愿望与残酷现实

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

思想懒惰导致的行为懒惰

思想懒惰导致的行为懒惰

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

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

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

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

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

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

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