css - 我可以根据仅使用 CSS 的包含列表项的数量来设置列表视图的样式吗？

Question

在我的页面上，我有许多listviews.

有些包含一个列表项，有些包含多个项目。我正在寻找一种方法来设置顶部/底部边框，具体取决于仅 CSS 方式中的列表项数量。

所以在单个项目列表中，边框应该是：

listitem > border-top & border-bottom

两个项目列表

listitem > border-top
listitem > border-top & border-bottom

三+项目清单

listitem > border-top
listitem > border-top & border-bottom
listitem > border-bottom

现在我有这个 CSS

.inputList li:not( .inputList li:first-child, .inputList li:last-child) {
    border-top-width: 1px;
    border-bottom-width: 1px;
    }
.inputList li:first-child {
    border-bottom-width: 1px;
    }
.inputList li:last-child {
    border-top-width: 1px;
    }

但这并没有让我走得太远，我正在使用not:我宁愿避免使用的（因为缺乏 IE 支持）

知道这是否可能吗？

谢谢！

Answer 1

所有你需要的是

.inputList li:first-child {
   border-top: 1px solid black;
}
.inputList li {
   border-bottom: 1px solid black;
}

这样，您将始终在顶部有一个边框，在底部和中间有一个边框。