在菜单项之间添加分隔线（伪类被忽略）答案

【问题标题】：Adding separator line between menu items (pseudo-class ignored)在菜单项之间添加分隔线（伪类被忽略）
【发布时间】：2013-07-12 00:12:20
【问题描述】：

我正在尝试在a Concrete5 site 中的菜单项之间实现分隔线，并尝试通过为每个菜单项添加右边框然后使用 :first-child 伪类在第一个之前添加分隔符来实现一。但是，伪类被忽略，每个菜单项的两侧都添加了边框。代码如下：

.top-bar-section ul li > a {
    display: block;
    width: 100%;
    color: white;
    padding: 12px 0 12px 0;
    padding-left: 15px;
    font-size: 0.8125em;
    font-weight: bold;
    background: #0D42C0; 
    border-right: 1px solid white;
}
    .top-bar-section ul li > a:first-child {
          border-left: 1px solid white;
}

我不知道 CMS 生成的 HTML 菜单的确切结构，但这些选择器似乎可以工作。不确定是否还有其他需要帮助解决此问题。如果需要更多信息来诊断此问题，请告诉我。

非常感谢任何帮助！

【问题讨论】：

标签： php css menu concrete5

【解决方案1】：

所有<a>s 都是它们各自<li>s 的第一个孩子。您需要改为定位第一个 <li>。试试这个：

.top-bar-section ul li:first-child > a {
      border-left: 1px solid white;
}

为了将来参考，请在问题中包含您的 HTML。

【讨论】：