css 选择器获取同名class 第一个或者最后一个元素（区分class）

---

前言

区分class，选择第一个或者最后一个元素。
如果不区分class,可以使用 first-child或者last-child等；

html

<div class="a">
  <div class="b">1</div>
  <div class="b">2</div>
  <div class="c">3</div>
  <div class="c">4</div>
  <div class="c">5</div>
  <div class="c">6</div>
  <div class="d">d</div>
</div>

一、选择第一个元素

c是连续的可以 用+ 号，不连续的必须用~

.a .c:not(.c ~.c) {
    color:red;
}

二、选择最后一个元素

.c:not(.a :has(+ .c)) {
   color: blue;
}