使用css .first创建列表项分隔符

Question

请参考这个例子:

我正在尝试使用left-border和.first css规则的组合在我的列表项之间创建垂直分隔符(但不是在末尾).为什么我在第一个元素前面仍然有边框？

HTML:

<ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
    <li>Item5</li>
</ul>

CSS:

ul li {
    display:inline;
    border-left: 1px solid #000;
    padding-left:6px;
}

ul li.first {
    border-left: none;
}

Answer 1

我认为你在寻找:first-child而不是.first(DEMO)

ul li:first-child {
    border-left: none;
}

为了进一步说明,.first(link)暗示了一个名为while的类,first而link:first-child(链接)是一个伪选择器