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

【问题标题】：Using css .first to create list item dividers使用 css .first 创建列表项分隔符
【发布时间】：2011-04-29 00:28:32
【问题描述】：

请参考这个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;
}

【问题讨论】：

【解决方案1】：

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

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

为了进一步澄清，.first (link) 意味着一个名为 first 的类，而 :first-child (link) 是一个伪选择器

【讨论】：

【解决方案2】：

您使用的 CSS 错误。 .first 是一个类，命名为 first :first-child 是一个伪类，解析为正好是第一个孩子。

检查这个修改后的fork on jsfiddle。

【讨论】：

【解决方案3】：

您应该使用 first-child 而不是 .first。点表示类名而不是选择器。你的 CSS 应该是这样的；

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

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

【讨论】：