html - 为列表中的班级选择第一个孩子

Question

这是一个简单的列表。

它包含6个项目，中间2个与第一个和最后一个2个不同的类。

我正在使用 CSS 来尝试从第一个项目中挑选出具有“lvl2”类的项目。

我实际上得到的是所有lvl2都被选中。

我猜它不会将其视为第一个孩子，因为列表中还有其他“li”元素。

问题是如何在没有 javascript 的情况下修复它？

.container {
  margin: 50px;
}

li {
  height: 48px;
}

li.lvl1 {
  background-color: lime;
}

li.lvl2 {
  background-color: aqua;
}

li.lvl2:not(:first-child) {
  background-color:red!important;
}

<div class="container">
  <ul>
      <li class="lvl1">Item 1</li>
      <li class="lvl1">Item 2</li>
      <li class="lvl2">Item 3</li>
      <li class="lvl2">Item 4</li>
      <li class="lvl1">Item 5</li>
      <li class="lvl1">Item 6</li>
  </ul>
</div>

标签： htmlcss