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

Question

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

现在，我在锚标记内放置了一个 span，这似乎工作正常，但是，我无法删除橙色栏的最后一个子项，如果我尝试这样做，它会删除所有。

那么如何在不中断项目悬停的情况下删除最后一个橙色条link？

这是代码笔：https://codepen.io/Aurelian/pen/vjzOyJ?editors=1010

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/SCSS:

    // ==========================================================================
// #Site Nav
// ==========================================================================
ul {
 list-style: none;
}

%triangle-bottom {
    content: '';
    display: block;
    height: 0;
    position: absolute;
    width: 0;
    overflow:hidden;
    bottom: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #f78f1e
}

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

    }

    &__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;
    }
}

Answer 1

添加这个css

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

工作片段在这里

ul {
  list-style: none;
}

.site-nav-desktop__item--dropdown:hover .site-nav-desktop__link span::before {
  content: '';
  display: block;
  height: 0;
  position: absolute;
  width: 0;
  overflow: hidden;
  bottom: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid #f78f1e;
}

.site-nav-desktop {
  display: none;
  width: 100%;
  padding-left: 96px;
  line-height: 5em;
}
.site-nav-desktop__item {
  float: left;
  margin-right: 1rem;
}
.site-nav-desktop__item--dropdown:hover .site-nav-desktop__link span::before {
  z-index: 9000;
  right: 50%;
  transform: translateX(50%);
}
.site-nav-desktop__item--dropdown:hover .site-nav-desktop__dropdown-list {
  display: block;
}
.site-nav-desktop__link {
  padding-right: 1rem;
  display: block;
  position: relative;
}
.site-nav-desktop__link > span {
  position: relative;
}
.site-nav-desktop__link span::after {
  content: "";
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  float: left;
  width: 1px;
  height: 17px;
  margin-left: 1rem;
  background-color: #f78f1d;
}
.site-nav-desktop__link > ul > li > a > span:last-of-type::after {
  display: none;
}
.site-nav-desktop__dropdown-list {
  background-color: #f78f1e;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  line-height: 3em;
  display: none;
}
.site-nav-desktop__dropdown-list li {
  display: inline-block;
  position: relative;
  margin-right: .6rem;
}
.site-nav-desktop__dropdown-list li::after {
  content: "";
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  float: left;
  width: 1px;
  height: 17px;
  right: 0;
  background-color: white;
}
.site-nav-desktop__dropdown-list li:last-child::after {
  display: none;
}
.site-nav-desktop__dropdown-list a {
  display: block;
  padding-right: 1rem;
}

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

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

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

Answer 2

尝试下面的 scss 并检查

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

Answer 3

试试这个 codepen。您可以使用 :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 {
  list-style: none;
}

.site-nav-desktop__item--dropdown:hover .site-nav-desktop__link span::before {
  content: '';
  display: block;
  height: 0;
  position: absolute;
  width: 0;
  overflow: hidden;
  bottom: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid #f78f1e;
}

.site-nav-desktop {
  display: none;
  width: 100%;
  padding-left: 96px;
  line-height: 5em;
}
.site-nav-desktop__item {
  float: left;
  margin-right: 1rem;
}
.site-nav-desktop__item--dropdown:hover .site-nav-desktop__link span::before {
  z-index: 9000;
  right: 50%;
  transform: translateX(50%);
}
.site-nav-desktop__item--dropdown:hover .site-nav-desktop__dropdown-list {
  display: block;
}
.site-nav-desktop__link {
  padding-right: 1rem;
  display: block;
  position: relative;
}
.site-nav-desktop__link > span {
  position: relative;
}
.site-nav-desktop__item:not(:last-child) .site-nav-desktop__link span::after {
  content: "";
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  float: left;
  width: 1px;
  height: 17px;
  margin-left: 1rem;
  background-color: #f78f1d;
}
.site-nav-desktop__link > ul > li > a > span:last-of-type::after {
  display: none;
}
.site-nav-desktop__dropdown-list {
  background-color: #f78f1e;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  line-height: 3em;
  display: none;
}
.site-nav-desktop__dropdown-list li {
  display: inline-block;
  position: relative;
  margin-right: .6rem;
}
.site-nav-desktop__dropdown-list li::after {
  content: "";
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  float: left;
  width: 1px;
  height: 17px;
  right: 0;
  background-color: white;
}
.site-nav-desktop__dropdown-list li:last-child::after {
  display: none;
}
.site-nav-desktop__dropdown-list a {
  display: block;
  padding-right: 1rem;
}

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

<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 中的最后一个子元素？

How to remove last child in CSS of a nested pseudo element?

html

css

css-selectors

pseudo-element