Html 如何删除嵌套伪元素CSS中的最后一个子元素？

我有一个结构，它有一个100%扩展的下拉菜单，这意味着li不能是相对的

现在，我在锚点标记中放置了一个跨度，这似乎很好，但是，我不能删除橙色条的最后一个子项，如果我尝试这样做，它将删除所有子项

那么，如何在不破坏项目链接悬停的情况下删除最后一个橙色条呢

这是代码笔：

HTML：

<ul class="site-nav-desktop__list">
    <li class="site-nav-desktop__item"><a href="" class="site-nav-desktop__link"><span>home</span></a></li>
    <li class="site-nav-desktop__item"><a href="" class="site-nav-desktop__link"><span>diensten</span></a></li>
    <li class="site-nav-desktop__item"><a href="" class="site-nav-desktop__link"><span>over ons</span></a></li>
    <li class="site-nav-desktop__item site-nav-desktop__item--dropdown">
        <a href="" class="site-nav-desktop__link"><span>projecten</span></a>
        <ul class="site-nav-desktop__dropdown-list">
            <li><a href="#">wonem</a></li>
            <li><a href="#">werken</a></li>
            <li><a href="#">skyboxen</a></li>
            <li><a href="#">horeca</a></li>
            <li><a href="#">3d impressies</a></li>
            <li><a href="#">Adeo Design</a></li>
        </ul>
    </li>
    <li class="site-nav-desktop__item"><a href="#contact" class="site-nav-desktop__link"><span>contact</span></a></li>
</ul>

添加这个css

.site-nav-desktop__item:last-child a span:after {
  content: none;
}

这里的工作片段

ul{
列表样式：无；
}
.site-nav-desktop\uuuu项目--下拉列表：悬停.site-nav-desktop\uuuu链接span:：before{
内容：''；
显示：块；
身高：0；
位置：绝对位置；
宽度：0；
溢出：隐藏；
底部：0；
左边框：5px实心透明；
右边框：5px实心透明；
边框底部：8px实心#f78f1e；
}
.网站导航桌面{
显示：无；
宽度：100%；
左侧填充：96px；
线高：5em；
}
.site-nav-desktop\u项目{
浮动：左；
右边距：1rem；
}
.site-nav-desktop\uuuu项目--下拉列表：悬停.site-nav-desktop\uuuu链接span:：before{
z指数：9000；
右：50%；
转化：translateX（50%）；
}
.site-nav-desktop\uuu项目--下拉列表：悬停.site-nav-desktop\uuu下拉列表{
显示：块；
}
.site-nav-desktop链接{
右侧填充：1rem；
显示：块；
位置：相对位置；
}
.site-nav-desktop__链接>span{
位置：相对位置；
}
.site-nav-desktop__链接span:：after{
内容：“；
最高：50%；
转化：translateY（-50%）；
位置：绝对位置；
浮动：左；
宽度：1px；
高度：17px；
左边距：1 em；
背景色：#f78f1d；
}
.site-nav-desktop\uu link>ul>li>a>span:type的最后一个：：之后{
显示：无；
}
.site-nav-desktop_uuu下拉列表{
背景色：#f78f1e；
位置：绝对位置；
左：0；
右：0；
宽度：100%；
文本对齐：居中；
线高：3em；
显示：无；
}
.site-nav-desktop_uuu下拉列表li{
显示：内联块；
位置：相对位置；
保证金权利：.6rem；
}
.site-nav-desktop_uuu下拉列表li:：after{
内容：“；
最高：50%；
转化：translateY（-50%）；
位置：绝对位置；
浮动：左；
宽度：1px；
高度：17px；
右：0；
背景色：白色；
}
.site-nav-desktop_uuu下拉列表li:最后一个子项：：之后{
显示：无；
}
.site-nav-desktop_uuu下拉列表a{
显示：块；
右侧填充：1rem；
}
.社交网站{
浮动：对；
}
.站点-社交项目{
显示：内联块；
}
.site-nav-desktop_uu项目：最后一个子项跨度：之后{
内容：无；
}

添加此css

.site-nav-desktop__item:last-child a span:after {
  content: none;
}

这里的工作片段

ul{
列表样式：无；
}
.site-nav-desktop\uuuu项目--下拉列表：悬停.site-nav-desktop\uuuu链接span:：before{
内容：''；
显示：块；
身高：0；
位置：绝对位置；
宽度：0；
溢出：隐藏；
底部：0；
左边框：5px实心透明；
右边框：5px实心透明；
边框底部：8px实心#f78f1e；
}
.网站导航桌面{
显示：无；
宽度：100%；
左侧填充：96px；
线高：5em；
}
.site-nav-desktop\u项目{
浮动：左；
右边距：1rem；
}
.site-nav-desktop\uuuu项目--下拉列表：悬停.site-nav-desktop\uuuu链接span:：before{
z指数：9000；
右：50%；
转化：translateX（50%）；
}
.site-nav-desktop\uuu项目--下拉列表：悬停.site-nav-desktop\uuu下拉列表{
显示：块；
}
.site-nav-desktop链接{
右侧填充：1rem；
显示：块；
位置：相对位置；
}
.site-nav-desktop__链接>span{
位置：相对位置；
}
.site-nav-desktop__链接span:：after{
内容：“；
最高：50%；
转化：translateY（-50%）；
位置：绝对位置；
浮动：左；
宽度：1px；
高度：17px；
左边距：1 em；
背景色：#f78f1d；
}
.site-nav-desktop\uu link>ul>li>a>span:type的最后一个：：之后{
显示：无；
}
.site-nav-desktop_uuu下拉列表{
背景色：#f78f1e；
位置：绝对位置；
左：0；
右：0；
宽度：100%；
文本对齐：居中；
线高：3em；
显示：无；
}
.site-nav-desktop_uuu下拉列表li{
显示：内联块；
位置：相对位置；
保证金权利：.6rem；
}
.site-nav-desktop_uuu下拉列表li:：after{
内容：“；
最高：50%；
转化：translateY（-50%）；
位置：绝对位置；
浮动：左；
宽度：1px；
高度：17px；
右：0；
背景色：白色；
}
.site-nav-desktop_uuu下拉列表li:最后一个子项：：之后{
显示：无；
}
.site-nav-desktop_uuu下拉列表a{
显示：块；
右侧填充：1rem；
}
.社交网站{
浮动：对；
}
.站点-社交项目{
显示：内联块；
}
.site-nav-desktop_uu项目：最后一个子项跨度：之后{
内容：无；
}

尝试下面的SCS并检查

 .site-nav-desktop__item:last-child {
  a {
    span::after {
      display: none;
    }
    padding-right: 0;
  }
  margin-right: 0;
}

---

在SCS下方尝试并检查

 .site-nav-desktop__item:last-child {
  a {
    span::after {
      display: none;
    }
    padding-right: 0;
  }
  margin-right: 0;
}

试试这个。您可以使用

：not

选择器。不覆盖任何样式

.site-nav-desktop__item:not(:last-child) &  span::after {
        content: "";
        top: 50%;
        transform: translateY(-50%);
        position: absolute;
        float: left;
        width: 1px;
        height: 17px;
        margin-left: 1rem;
        background-color: #f78f1d;
    }

ul{
列表样式：无；
}
.site-nav-desktop_uu项--下拉列表：hover.site