html - 访问除第一个和最后一个之外的所有导航元素？

Question

我在无序列表中有一个导航，简化的 html 如下:

<ul>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
    etc ...
</ul>

此模块的导航具有动态数量的链接，因此如何使用一些花哨的 css 选择器更改第一个和最后一个元素的边框？我对 css 很糟糕，所以提前道歉:x

Answer 1

有几种方法可以做到这一点，最简单的是第一个 child 和最后一个 child 选择器。

li:first-child {
    border: 1px solid red;
}

li:last-child {
    border: 1px solid blue;
}

Here's a JSfiddle