首先在`ul`中使用css定位具有特定类的`li`

Question

是否有可能首先li在内部具有特定类ul？例如 :

 <ul>
     <li class="a"></li> <!-- I want to target this li -->
     <li class="a"></li>
     <li class="a"></li>
     <li class="b"></li> <!-- and this li -->
     <li class="b"></li>
     <li class="b"></li>
 </ul>

有可能吗？

Answer 1

使用:first-child伪类和相邻的兄弟选择器+.

.a:first-child, /* Select the first child element */
.a + .b { /* Select the first element with 'b' class */
  background-color: dodgerblue;
}

<ul>
  <li class="a"></li>
  <li class="a"></li>
  <li class="a"></li>
  <li class="b"></li>
  <li class="b"></li>
  <li class="b"></li>
</ul>