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

css3选择器之nth-child的用处

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

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

该死的dg597服务让我windows假死

该死的dg597服务让我windows假死

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

关于焦虑

关于焦虑

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

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

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

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

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

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

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

想用VMware体验MacOS,关键一步进行不下去

想用VMware体验MacOS,关键一步进行不下去

最近想体验一把黑苹果,于是装了个虚拟机,然后按照网上的教程,用unlocker破解了VMware的限制,新建虚拟机的时候可以选择MacOS,内心有点小激动。然后又按照网上的教程,下载了mojave 10.14.6系统,然后用TransMac把闲置的一个U盘转换成苹果格式的,然后把镜像写入优盘,本以为...

HBuilderX下载语法插件失败的处理方法

HBuilderX下载语法插件失败的处理方法

因为Notepad++政治化的问题,决定今后卸载它不再用了。但是要找到一款还过得去的notepad替代文本编辑器工具,还真是有点麻烦。之前用过HBuilderX还不错,于是下载安装了。启动的时候,发现状态栏有一个提示:“下载语法插件失败”,联想到安装在C盘,有可能是权限问题。于是尝试使用管理员身份运...