当前位置:首页 > 默认

css3选择器之nth-child的用处

喵斯基9年前 (2018-03-21)默认4049

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

本周前端工作二三事

本周前端工作二三事

这周没什么特别的事情,就是做了个UI,总体来说,不是特别满意,作品也发给几个朋友看了,都说太素了。太素的东西,就勾不起人的欲望,so,还得努力。比如说设计语言这块,我还是太薄弱了。比如说客户需要一个会说话的网站,那以我现在的水平,说话的不会,瞌睡的大大地。这方面,还需要去学习,前端工作就是如此,你设…

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

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

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

小众软件之SpaceSniffer——找到占用硬盘的元凶

小众软件之SpaceSniffer——找到占用硬盘的元凶

随着硬盘容量的增大,我们越来越不关注硬盘占用情况,但是不关注并不代表不重要。硬盘的占用随着我们日常应用的频繁,会出现越来越多的垃圾。比如我们的C盘,用着用着就莫名其妙的空间少了不少。然后我们就会找原因,不论是清空浏览器缓存,还是怎么的,总感觉还是有些垃圾没有清理掉。我将会推出一系列的小工具,帮助我们…

良好愿望与残酷现实

良好愿望与残酷现实

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

wps任务栏闪烁广告如何去除

wps任务栏闪烁广告如何去除

自从360利用免费模式干掉收费的杀毒软件制霸中国杀毒市场以来,免费这套路从来就没有令人失望过。作为国产软件的龙头,wps历经三十多年的发展,扛起了民族软件的大旗。自dos时代横空出世以来,横扫国内办公软件市场,直到遇到微软的office。在被微软套路以后,wps就一直被office打压,后来索性推出…

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

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

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