CSS last-child 未覆盖 parent 边框

Question

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

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让你明白

提示： 给classes 和id 的名字，它有语义意义。当您给出 class 像这样的名称时，很难编写代码。

.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>

Answer 2

您不需要任何 :after。

这里有一些解决方案建议:

https://jsfiddle.net/c4Lrmpfx/

.gf-menu.l1 {
   list-style: none;
}
.gf-menu.l1 > li {
   float: left;
   text-align: center;
}
.gf-menu.l1 > li a.item {
   /* Better to apply the style to the A instead of the LI,
       also to style the clickable area */
   display: block;
   padding: 10px;
   text-decoration: none;
   background-color: rgba(0,0,0,0.1);   
}
.gf-menu.l1 > li a.item:hover {
   background-color: rgba(0,0,0,0.2);
}

.gf-menu.l1 > li:not(:last-child) a.item{
   border-right: 1px solid #000;
}

<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>

这里我使用选择器 :not 而不是用另一行将 last-child 定义为 border-right: 0;

此处 :not 指定 :last-child 不会包含在以下属性中。

Answer 3

看来你离得不远了...如果你想让它们并排显示，那么你需要将 CSS 更改为：

gf-menu.l1 li {
display: inline;
border-right: 1px solid black;
}

CSS last-child 未覆盖 parent 边框

CSS last-child not overriding parent border

html

css

overriding

css-selectors