Html 仅当存在两个或多个元素时，才使用类型的最后一个

我正在设计一个页面，我不知道页面上有多少元素。通常有两种，所以我有针对第一个元素和最后一个元素的样式。在只有一个元素之前，这种方法工作得很好，然后得到最后一个元素样式

CSS是否有办法确保只有一个元素不接收第一个或最后一个元素的样式。如果可能的话，我想尽量避免使用JS

CSS

.content-box
  .item:first-of-type
    // some styles
  .item.last-of-type
    // some styles

只有当第一个元素不是最后一个元素时，才能使用伪类来匹配第一个元素，反之亦然：

.item:type的第一个：not（：type的最后一个）{/*…*/}
.item:type的最后一个：not（：type的第一个）{/*…*/}

li:type的第一个：not（：type的最后一个）{
背景：#ff0；
}
li:类型的最后一个：非（：类型的第一个）{
背景：#0f0；
}

首先
福
酒吧
最后



最后一个

@misterManSam:浏览器对绝大多数选择器-3伪类的支持是相同的。不用担心。嗨，我已经做了一些测试，并且：not选择器似乎覆盖了需要保留在那里的样式，以防有两个或更多的元素。因为我需要完整的这些样式，还有其他想法吗？TXC您可以包括这些选择器吗？另一种方法是在末尾使用

。item:first of type:last of type{/*Unset style*/}

。@clintgreen结果是预期的：由于元素既是第一个也是最后一个

div

，所以

：first of type

和

：last of type

都适用，但不是

：first of type:not（：last of type）

或

：类型的最后一个：不是（：类型的第一个）

。我明白了。如果存在多个元素，我将如何创建一个选择器，该选择器将忽略元素，但如果只有一个，则忽略目标元素？下面是一个适用于遇到相同问题的人的工作示例，感谢@Oriol的帮助-