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

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;
}

有了它，您将始终在顶部和底部以及两者之间有一个边框。