Question

我正在尝试在a Concrete5 site中的菜单项之间实现分隔线，并试图通过向每个菜单项添加border-right然后使用：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菜单的确切结构，但这些选择器似乎正在运行。不确定是否还有其他任何需要帮助解决此问题。如果需要更多信息来诊断此问题，请告诉我。

非常感谢任何帮助！

Answer 1

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

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

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

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

1 个答案: