html - CSS last-child 不覆盖父边界

Question

首先让我先说我是 CSS 的新手，主要完成内联样式。我正在做的是使用 <ul>作为菜单，其中 <li> items 是菜单项。右边框用作菜单项之间的分隔符，但如果最后一个菜单项没有右边框在视觉上会更好。

CSS代码

.gf-menu.l1 > li > .item:after
{
    border-right: 1px solid #E3E3E3;
    bottom: 0;
    content: "";
    position: absolute;
    right: 0;
    top: 0;
}
.gf-menu.l1 > li:first-child
{
    margin-left: 5px;
}
.gf-menu.l1 > li:last-child 
{
    margin-right: 5px;
    border-right: 0;
} 

HTML

<ul class="gf-menu l1 ">
    <li class="item487">
        <a class="item" href="link1">
            menu_item_1
        </a>      
    </li>
    <li class="item488">
        <a class="item" href="link2">
            menu_item_2
        </a>      
    </li>
    <li class="item489">
        <a class="item" href="link1">
            menu_item_2
        </a>      
    </li>
</ul>

我只能假设它与 after 有关元素，因为边距实际上是在正确的位置添加的，但我无法弄清楚。

提前致谢。

Answer 1

我已经使用了您的 HTML 并编写了最少的 CSS 以便您理解

提示: 给出具有语义意义的类和 id 名称。当您给出这样的类名时，很难编写代码。

.gf-menu.l1 li {
    display: inline-block;
    padding: 0 10px 0 10px;
    border-right: 1px solid red;
}

.gf-menu.l1 li:last-child {
    border-right: none;
}

<ul class="gf-menu l1 ">
    <li class="item487">
        <a class="item" href="link1">
            menu_item_1
        </a>      
    </li>
    <li class="item488">
        <a class="item" href="link2">
            menu_item_2
        </a>      
    </li>
    <li class="item489">
        <a class="item" href="link1">
            menu_item_2
        </a>      
    </li>
</ul>