专栏首页樯橹代码css3 nth-child选择器

css3 nth-child选择器

css3 nth-child选择器

css3的nth-child选择器,乍看起来很简单,其实不是那么容易。

简单用法

p:nth-child(n) // 选择属于其父元素的第n个子元素的每个 <p> 元素
p:nth-child(2n) // 选择属于其父元素的子元素的每个偶数<p> 元素
p:nth-child(2n + 1) // 选择属于其父元素的子元素的每个奇数<p> 元素

注意事项

大概大家都知道上面的使用方法,但是有一点搞不清楚的话,使用起来就会很困惑。那就是n是什么?

n是从0开始的正整数,它代表着一个序列,0, 1, 2......这样的。

但是:nth-child(n+m)中的n+m是从1开始计算的,也就是说子元素的起始计算序号是1,不存在0这样子的元素。第一个元素就是1,不是0。这和程序里面的数组起始序号还有jQuery的选择器都是不一样的。

这样子就很好理解了。当我们要选择哪些元素的时候,只要把参数根据n的递增算出来的值对应到子元素在父元素里面的位置序列就好了

比如查找第一个元素

:nth-child(1)

查找序列大于等于10的元素

:nth-child(n+10)

就这样子的

css3中还有一些其他的子元素选择器

比如

:first-child // 第一个元素
:last-child    // 最后一个元素
:nth-last-child // 从最后一个子元素开始计数,n还是0开始,但是子元素的最后一个是1,倒过来了

互相辅助,还是很好用的

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • (译)一篇对css网格布局的介绍

    css3 Grid Layout 表格布局是在css中强大的难以置信的布局模块。它是二维空间的,所以它可以处理行和列

    frontoldman
  • Rxjs 响应式编程-第三章: 构建并发程序

    并发是正确有效地同时做几件事的艺术。为了实现这一目标,我们构建我们的程序来利用时间,以最有效的方式一起运行任务。 应用程序中的日常并发示例包括在其他活动发生时保...

    frontoldman
  • 修复bug: TypeError: __webpack_require__(...) is not a function

    当前项目使用react+redux+postcss+webpack+ant实现的,本地开启了热更新以及自动刷新。更改js的时候可以正常编译以及刷新浏览器。可是每...

    frontoldman
  • 第91天:CSS3 属性选择器、伪类选择器和伪元素选择器

    除了以前学过的:link、:active、:visited、:hover,CSS3又新增了其它的伪类选择器。

    半指温柔乐
  • 前端常见技术点 - CSS / DOM / 布局(43问)

    这里总结一下 WEB 前端面试 CSS 部分的常见问题,同时这些问题也是对一些基础的技术概念和思想的理解。对这些基本知识的掌握程度和深度决定了你的技术层级。高级...

    用户5997198
  • 我不知道你知不知道我知道的伪元素小技巧

    伪元素能做什么?我们要他有何用?它能为我们解决什么问题?和其他的方法相比她有什么有点?我们为什么要使用它?

    sunseekers
  • 前端基础篇之CSS世界

    我想你每天写css代码有时候也会觉得很痛苦:这个布局的css怎么这么难实现!我也经常会有这种感觉,一个看似简单的布局总是要琢磨半天才能实现,偶尔还会出现一些怪异...

    Nealyang
  • 第213天:12个HTML和CSS必须知道的重点难点问题

    这12个问题,基本上就是HTML和CSS基础中的重点个难点了,也是必须要弄清楚的基本问题,其中定位的绝对定位和相对定位到底相对什么定位?这个还是容易被忽视的,浮...

    半指温柔乐
  • JavaWeb(八)JQuery

    jQuery 市场用得比较多两个框架: jQuery 比较适合做一些互联网 的应用(12306.com,蘑菇街,美丽说,聚美) extjs 比较适合做后台管理系...

    二十三年蝉
  • web前端开发初学者十问集锦(2)

    行内元素(如a标签),在文档流中的时候因为是行内元素所以无法设置宽高;而当设置了绝对定位或者浮动,会生成块级框(即变成块级元素),所以就可以设置宽高了。

    Dabelv

扫码关注云+社区

领取腾讯云代金券