你了解css3的nth-child吗

栏目: CSS3 · 发布时间: 6年前

内容简介：而它比较难理解的地方是参数表达式中

:nth-child(n) 选择器匹配属于其父元素的第 n 个子元素，借助这个特性，可以实现选择第偶数次序的子元素、选择一定范围内的子元素等“ 批量选择操作 ”。

而它比较难理解的地方是参数表达式中 n 的含义，以及如何进行数学运算，这也是面试中考察的难点。

nth-child介绍

:nth-child(n) 选择器匹配属于其父元素的第 n 个子元素。

使用它的时候需要注意几点：

第n个子元素的 计数是从1开始 ，不是从0开始的
选择表达式中的 字母 n 代表≥0的整数

常见用法

它有3种常见用法：

直接指明n的值： span:nth-child(1)
用 even / odd 分别代表偶数 / 奇数： span:nth-child(even)
借助 n 自定义选择范围：
- nth-child(2n) / nth-child(2n + 1) ：偶数 / 奇数
- nth-child(n + 3) ：第3个开始到最后

进阶用法

上面的用法中的第三部分，一般都是使用 n ，而有时候也会用到 -n ，比如选取前2个元素就是： nth-child(-n + 2) 。

为什么是这样呢？其实运算： -n + 2 ≥ 0 ，就可以推出 n ≤ 2 。

由此，结合两者自动取交集，我们就可以限制选择某一范围。比如选择第6个到第9个，就是： :nth-child(-n+9):nth-child(n+6)

注意：不是 nth-child(2 - n) ， -n 要写在一起！

真正理解“子元素”的含义

还是 nth-child 选择器，那么下面这段代码的样式是什么呢？

<html>
<head>
  <style>
    span:nth-child(2n) {
      color: red;
    }
  </style>
</head>
<body>
  <div>
    <span>1</span>
    <span>2</span>
  </div>
  <span>3</span>
</body>
</html>

答案是： 1 是黑色的， 2 和 3 都是红色的。

因为 <span>2</span> 是其父节点的第2个（偶数）子元素。 <span>3</span> 是其父节点的第2个子元素，第一个是 <div></div> 。

所以辨别是否匹配的关键是：找到父元素，然后再计算在父元素中的位置。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

编程人生（上卷）

[美] Peter Seibel / 图灵社区 / 人民邮电出版社 / 2014-12 / 39.00元

这是一本访谈笔录，记录了当今最具个人魅力的15 位软件先驱的编程生涯。包括Donald Knuth、Jamie Zawinski、Joshua Bloch、Ken Thompson等在内的业界传奇人物，为我们讲述了他们是怎么学习编程的，在编程过程中发现了什么以及他们对未来的看法，并对诸如应该如何设计软件等长久以来一直困扰很多程序员的问题谈了自己的观点。中文版分为上下卷，上卷介绍8位大师。一起来看看《编程人生（上卷）》这本书的介绍吧!

码农工具