如何在CSS中移除嵌套伪元素的最后一个橙色分隔栏？

嘿，我看了你的代码，问题出在你当前的分隔线选择器是给所有.site-nav-desktop__link下的span都加了橙色竖线，而你之前尝试的选择器没精准定位到最后一个导航项，所以才会把所有分隔线都去掉。别担心，只需要加一行简单的CSS就能搞定，还不会破坏projecten的hover下拉效果。

具体修改方案 #

你只需要在SCSS里添加一个针对最后一个导航项的选择器，把它的分隔线隐藏掉：

// 隐藏最后一个导航项的橙色分隔线
.site-nav-desktop__item:last-child .site-nav-desktop__link span::after {
  display: none;
}

原理说明 #

• :last-child伪类会精准选中.site-nav-desktop__list里的最后一个.site-nav-desktop__item（也就是"contact"那一项）
• 然后我们只针对这个项里的span::after伪元素设置display: none，这样只会移除最后一条分隔线，其他导航项的分隔线和projecten的hover下拉效果都不会受影响。

把代码整合到你的SCSS里 #

你可以把这段代码加到.site-nav-desktop__item的规则块里，这样结构更清晰：

.site-nav-desktop {
  display: none;
  width: 100%;
  padding-left: 96px;
  line-height: 5em;
  
  &__item {
    float: left;
    margin-right: 1rem;
    
    &--dropdown:hover .site-nav-desktop__link span::before {
      @extend %triangle-bottom;
      z-index: 9000;
      right: 50%;
      transform: translateX(50%);
    }
    
    &--dropdown:hover .site-nav-desktop__dropdown-list {
      display: block;
    }
    
    // 新增：最后一个导航项的分隔线隐藏
    &:last-child .site-nav-desktop__link span::after {
      display: none;
    }
  }
  
  &__link {
    padding-right: 1rem;
    display: block;
    position: relative;
    
    & > span {
      position: relative;
    }
    
    & span::after {
      content: "";
      top: 50%;
      transform: translateY(-50%);
      position: absolute;
      float: left;
      width: 1px;
      height: 17px;
      margin-left: 1rem;
      background-color: #f78f1d;
    }
    
    & > ul > li > a > span:last-of-type::after {
      display: none;
    }
  }
  
  &__dropdown-list {
    background-color: #f78f1e;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    line-height: 3em;
    display: none;
    
    & li {
      display: inline-block;
      position: relative;
      margin-right: .6rem;
      
      &::after {
        content: "";
        top: 50%;
        transform: translateY(-50%);
        position: absolute;
        float: left;
        width: 1px;
        height: 17px;
        right: 0;
        background-color: white;
      }
      
      &:last-child::after {
        display: none;
      }
    }
    
    & a {
      display: block;
      padding-right: 1rem;
    }
  }
}

.site-social {
  float: right;
  
  &__item {
    display: inline-block;
  }
}

这样修改后，最后一个"contact"导航项后面的橙色分隔线就会消失，同时projecten的hover下拉功能完全正常，不会有任何破坏。

内容的提问来源于stack exchange，提问作者Aurelian Spodarec