:nth-of-type 和 :nth-child 伪类别再傻傻分不清

简介: 前端西瓜哥

大家好,我是前端西瓜哥。今天我们来学习一些长得很像的两兄弟 :nth-of-type 和 :nth-child。

:nth-child

首先根据 :nth-chilid 前的样式规则,找到所有匹配元素的所有兄弟元素。然后我们从中找出 符合位置规则 的元素,并且这些元素也 符合样式规则,就应用样式。

这个位置规则其实是一个 an + b 的表达式。其中 a 和 b 表示一个类型为整数的常数,如果值为 0,可以省略不写。n 是一个变量,为从 0 开始的递增整数集合

这里我们给几个表达式例子:

  • nth-child(2n+1):匹配位置为奇数(即 1、3、5、7...)的元素。因为比较常用,比如表格的斑马线效果,所以我们可以用语义更好的关键字 odd 来替代 2n+1。需要特别注意的是,元素的索引是从 1 开始的,不是从 0 开始的
  • nth-child(2n):匹配位置为偶数(即 2、4、6、8...)的元素。同 nth-child(even)。
  • nth-child(-n+3):匹配前三个元素。
  • nth-child(1):匹配首元素,同 :first-child。

下面我们看一个具体的例子。

HTML 和 CSS 如下:

<style>
  div.item:nth-child(2n+1) {
    border: 1px solid salmon;
  }
</style>
<div>
  <div>div1</div>
  <div class="item">div2 .item</div>
  <div class="item">div3 .item</div>
  <div class="item">div4 .item</div>
  <div>div5</div>
</div>

渲染结果如下:

image.png

首先我们通过 div.item 找到 div2 这个元素,然后我们通过 2n+1 找到需要应用样式的兄弟元素。

符合规则 2n+1 有 div1、div3、div5,然后我们从中找出符合 .item 的,也就是 div3.item,给它应用样式。

image.png

:nth-of-type

:nth-of-type 和 :nth-child 非常像,也是通过在兄弟元素中找出符合 an+b 表达式的元素,给它们应用样式。

但有一点不同,就是元素的索引位置是从样式匹配的兄弟元素从上到下排序的。

我们看一个具体的例子。

HTML 和 CSS 如下:

<style>
  div.item:nth-of-type(2n+1) {
    border: 1px solid salmon;
  }
</style>
<div>
  <p>p1</p>
  <div class="item">div1 .item</div>
  <div class="item">div2 .item</div>
  <p>p2</p>
  <div class="item">div3 .item</div>
</div>

渲染结果如下:

image.png

我们通过 div.item 匹配到 div1 元素,然后找出它的兄弟元素中所有匹配 div.item 的元素,给它们按顺序标上 1、2、3、4... 索引值。最后从里面挑选索引符合 2n+1 表达式,也就是奇数位置的元素。

image.png

总结

简单来说,:nth-child 是先圈定所有兄弟元素,给它们顺序标上索引,然后从中找到既符合表达式也符合 div.item 的元素。而 :nth-of-type 是先圈定符合 div.item 的所有元素给它们标上索引,从中找出符合表达式的元素。

我是前端西瓜哥,热衷于分享前端知识,欢迎关注我。

相关文章
|
数据可视化 数据挖掘 大数据
Pandas+Pyecharts | 北京某平台二手房数据分析可视化
Pandas+Pyecharts | 北京某平台二手房数据分析可视化
tesseract is not installed or it‘s not in your PATH解决办法!
简介:当我们想使用 pytesseract库的时候,我们开心的使用 pip install pytesseract安装完成后,却发现它并不能识别出图片内容,并且会抛出异常: pytesseract.pytesseract.TesseractNotFoundError: tesseract is not installed or it’s not in your PATH. See README file for more information.
tesseract is not installed or it‘s not in your PATH解决办法!
|
9月前
|
大数据 开发者
通义灵码创新实践征集赛获奖名单公布!
通义灵码创新实践征集赛得到了众多开发者的支持和喜爱,现公布活动获奖名单,快来看看吧!
337 5
|
数据可视化 TensorFlow 算法框架/工具
JAX 中文文档(三)(2)
JAX 中文文档(三)
277 0
|
11月前
|
Web App开发 开发者
|
编解码 前端开发 UED
前端需要完完全全掌握的这些布局方案
前端需要完完全全掌握的这些布局方案
|
关系型数据库 MySQL
9. Mysql 模糊查询和正则表达式
9. Mysql 模糊查询和正则表达式
311 1
|
芯片
STM32CubeMX TM1637驱动数码管
STM32CubeMX TM1637驱动数码管
730 6
|
开发工具
java.lang.unsatisfiedlinkerror解决方法
java.lang.unsatisfiedlinkerror解决方法
1389 1
|
Linux 数据库 开发者
快速上手 AppUploader——下载和安装操作
快速上手 AppUploader——下载和安装操作

热门文章

最新文章