先看一段代码
<body>
<div class="dd">
<div>dd2</div>
<div>
<p>123</p>
<div>what</div>
<span>first pic</span>
<span class="pic-container">dd1</span>
<span>what we have lost will neve</span>
<span class="pic-container">dd2</span>
<span class="pic-container">dd3</span>
<span>last pic</span>
<p>www</p>
<div>wssss</div>
</div>
<div>dddd</div>
</div>
</body>
然后我们看几个选择器:
div div:last-of-type: 每个div下面的最后一个div
div div:last-child: 每个div下面的最后一个元素,如果是div标签就选中
但是,当选择的是class的时候,就有坑了
div .pic-container:last-of-type是选中不了dd3这个span标签的结果为null,因为有<span>last pic</span>这个挡在最后面,我的猜测是应该是选中了.pic-container这个class对应的元素标签,然后该元素标签不是最后一个,导致无法选取到.
div .pic-container:last-child当然也是选中不了的,最后一个子元素都不是.pic-container这个class.
first-of-type和first-child 同理.
所以为了避免这种情况,还是不要用last-of-type去和class绑定了
