问题起因
近日，笔者在重写第三方组件样式时遇到了如下场景：
需要获取到含有
.ant-calendar-in-range-cell类的第一个元素和最后一个元素。
简单来说，就是：
<ul>
<li />
<li class="need-selected" />
<li class="need-selected" />
<li class="need-selected" />
<li />
</ul>
获取到含有need-selected类的第一个和最后一个元素
实现经过
方案1
笔者肌肉记忆使用了nth-of-type
.need-selected:nth-of-type(1) {
list-style-type: square;
}
发现毫无作用0.o, 翻了翻nth-of-type的用法：
发现他只对type-selector,也就是元素标签起作用。
然后就看到了这个：
试了试，成功获取到了所需的dom元素。
顺带一提： li.need-selected:nth-child(1)获取的是位于第一个的li.need-selected元素，是无法顺利获取所需dom的。
方案2
虽然成功获取到了，但是这种方法编译器会报错，自己之前也确实没见过这种写法，应该不是常见的实现方式。遂继续探寻其他的实现方式。
分别获取
- 为第一个元素的.need-selected
- 非.need-selected的li后紧挨着的.need-selected
- 为最后一个元素的.need-selected
- 后面紧挨着一个非.need-selected的li的.need-selected
可以实现所需要求（写完感觉也好笨重啊，还不如第一个）
