这是一个简单的列表。
它包含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>