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

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

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

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

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

Here's a JSfiddle

Answer 2

不确定你想要什么，但这里有一些让你入门的选择：

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

或

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

或

ul { border: 1px solid red; border-width: 1px 0; }

希望能为您提供一些想法并激发您的好奇心，以便了解更多信息。 =）

Answer 3

在我看来，您需要使用：nth-​​child选择器

li:nth-child(1){}
li:nth-child(3){}
li:nth-child(4){}
li:nth-child(5){}
li:nth-child(6){}

当然每个人都已提到过：

li:first-child{}
li:last-child{}

如果已经分配了任何类，则使用

.class-name{} /*where class name is the specific class*/

更高级，你需要使用jS。