CSS的奇技淫巧1.0前言 CSS是前端开发中不可或缺的一部分，说它简单，确实在开发过程中，CSS往往是不被重视的部分，

前言

CSS是前端开发中不可或缺的一部分，说它简单，确实在开发过程中，CSS往往是不被重视的部分，说它难，有些效果有时候化一天也研究不出来，只能用博大精深来形容，随着CSS不断演进，新的特性和属性层出不穷，有些效果之前无法快速实现的，现在也有实现的方案，本文旨在记录在工作中，使用到的CSS的奇技淫巧。

:nth-child 的 of 语法

问题：在css中，选择.a下的第一个.b的div，.b出现在.a的位置随机

<div class="a">
  <div class="c">222</div>
  <div class="b">222</div> <!--要选中这个div-->
  <div class="b">222</div>
  <div class="b">222</div>
</div>

我们常用:nth-child伪类来选择第n个子元素，奇/偶数位置的子元素，每间隔n个位置的元素，对应的写法为：:nth-child(1)，:nth-child(odd/even)，:nth-child(3n)（每隔3个子元素），但这些语法都无法用来实现上面题目的要求（.a下面第一个是.b的子元素），最近查阅MDN后，发现chrome 111 版本以后，nth-child支持of的语法了，对于上面的问题，我们可以简单的写一个selector就能实现

.a :nth-child(1 of .b) {
  color: #f40;
}