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

css3选择器之nth-child的用处

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

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

口腔溃疡贴意可贴没卵用

口腔溃疡贴意可贴没卵用

上周吃个饭,把舌头咬破了,然后没几天,破损处就变成口腔溃疡了。看了网上很多帖子,说是口腔溃疡的生成机制至今不明,纯属胡说八道,反正我每次口腔溃疡,基本都是口腔破损引起。所以说口腔溃疡原因不明的,滚粗。伪专家。然后,是意可贴,这玩意儿,其实并没卵用,最多就是好缓解症状,不会被触碰而已,化了就没用了,就...

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

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

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

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

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

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

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

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

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

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

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

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

WizTree:比SpaceSniffer更好使的磁盘清理小助手

WizTree:比SpaceSniffer更好使的磁盘清理小助手

之前的文章中写过一篇《小众软件之SpaceSniffer——找到占用硬盘的元凶》的文章,当时对这款软件还是很满意的,不过因为是单文件的原因,有时候运行的时候会弹出很多对话框(因为权限的原因,非管理员权限运行无法查看系统文件,必须用管理员权限运行),使用体验上并不是那么好。今天推荐一个WizTree的...