在列表中选择第一个孩子上课

时间:2018-08-09 14:27:00

标签: html css

这是一个简单的列表。

它包含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>

0 个答案:

没有答案