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

Question

请参考此example：

我正在尝试使用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）意味着一个名为first的类，而:first-child（link）则是一个伪选择器

Answer 2

你使用CSS错了。 .first是一个名为first :first-child的类，它是一个解析第一个孩子的伪类。

检查此修订后的fork on jsfiddle。

Answer 3

您应该使用first-child而不是.first。圆点表示类名而不是选择器。你的css看起来像这样;

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

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