:nth-of-type执行流程与说明

当你使用其他非标签div、p....选择器时，浏览器会先行匹配选中的元素，然后解析元素的标签，最后通过标签所在父元素的位置进行匹配。

选择器执行流程

HTML

<body>
<div class="father">
  <div class="aaa">1</div>
  <div class="children">2</div>
  <div class="children">3</div>
  <div class="children">4</div>
  <div class="children">5</div>
</div>
<p class="children">6</p>
</body>

CSS

<style>
.children:nth-of-type(2) {
  background: blue;
}
</style>

流程

  1. 通过 .children 寻找到内容为 2、3、4、5、6 的元素
  2. 获取标签相同的所有兄弟元素（这里为 father 下的所有 div 和 body 下的 p）
  3. 根据 :nth-of-type(2) 括号内 2 进行选中并渲染CSS样式

最后

van-sticky当最大的那个父元素不设置overflow-y: scroll时候似乎会出现问题，挖个坑后面读一下代码看看

文章目录