訪問除頭和尾以外的所有導航元素？

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

這是一個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。