css的一个伪类,nth-child

之前在写移动端的项目的时候,对一些列表元素有一些需求
比如,你想要给列表里的前三个元素加上边框,后三个元素变灰....我以前的做法是用js在遍历数组的时候判断当前元素的index,然后用index做一些逻辑判断操作,来给这个元素加上想要的className,这样的做法需要做很多的js计算,频繁地去使用map函数和forEach函数,并要写很多的回调函数。
最近在看css权威指南,看到nth-child,他是一个伪类选择器,可以轻松地选取你想要的标签并给与修改添加样式(但是不支持低版本的IE!)

  1. :nth-child(2)选取第几个标签,“2可以是你想要的数字”
.demo01 li:nth-child(2){background:#090}
  1. nth-child(n+4)选取大于等于4标签,nth-child(-n+4)选取小于等于4标签,“n”表示从整数
.demo01 li:nth-child(n+4){background:#090}
.demo01 li:nth-child(-n+4){background:#090}
  1. :nth-child(2n)选取偶数标签,nth-child(2n-1)选择奇数标签
.demo01 li:nth-child(2n-1){background:#090}
.demo01 li:nth-child(2n){background:#090}
  1. :nth-child(3n+1)自定义选取标签,3n+1表示“隔二取一”
.demo01 li:nth-child(3n+1){background:#090}

这样的话,也就是说你想得到该有的函数,就可以模拟出js的逻辑判断操作。

同样的伪类选择器

  • nth-last-child() : 选择倒数第几个标签
  • last-child选取最后一个标签
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS参考手册 一、初识CSS3 1.1 CSS是什么 CSS3在CSS2.1的基础上增加了很多强大的新功能。目前...
    没汁帅阅读 3,697评论 1 13
  • CSS选择器大致可以分成5类:基本选择器,层次选择器,属性选择器,伪类,伪元素。基本,层次,属性选择器比较容易理解...
    张歆琳阅读 1,876评论 4 26
  • display: none; 与 visibility: hidden; 的区别 联系:它们都能让元素不可见 区别...
    纹小艾阅读 1,691评论 0 1
  • 1.class 和 id 的使用场景? 两者都能选取DOM节点并给DOM节点添加样式,但是W3C标准里规定页面中只...
    饥人谷_米弥轮阅读 428评论 0 1
  • 前端中感觉css确实是一个很神奇的东西,你说它容易吧,确实比较容易,写写元素的宽高,背景颜色,掌握一些基本的布局技...
    橙色流年阅读 1,559评论 0 1