SASS中:last-child与::after用法解析及最后一个li伪元素移除问题

原代码的问题所在 #

先看你写的SASS编译后的CSS代码，就能明白为啥没生效：

ul.breadcrumbs {
  margin-top: 30px;
  display: flex;
  list-style-type: none;
  gap: 20px;
}
ul.breadcrumbs li.bread-item::after {
  content: ">";
  margin-left: 20px;
}
ul.breadcrumbs:last-child::after {
  content: "";
}

最后一条规则是给页面中最后一个ul.breadcrumbs元素的伪元素清空内容，完全没选中ul内部最后一个li.bread-item的伪元素，自然达不到移除最后一个箭头的效果。

正确的实现代码 #

你需要把:last-child选择器嵌套在li.bread-item的层级里，这样才能精准选中目标元素：

ul.breadcrumbs
    margin-top: 30px
    display: flex
    list-style-type: none
    gap: 20px
    li.bread-item
        &::after
            content: ">"
            margin-left: 20px
        // 给最后一个li的伪元素清空内容
        &:last-child::after
            content: ""

编译后的CSS会变成：

ul.breadcrumbs {
  margin-top: 30px;
  display: flex;
  list-style-type: none;
  gap: 20px;
}
ul.breadcrumbs li.bread-item::after {
  content: ">";
  margin-left: 20px;
}
ul.breadcrumbs li.bread-item:last-child::after {
  content: "";
}

这时候就能正确移除最后一个面包屑项后面的箭头了。

更高效的写法推荐 #

其实可以换个思路，只给非最后一个面包屑项加伪元素，这样不用额外清空内容，逻辑更直接：

ul.breadcrumbs
    margin-top: 30px
    display: flex
    list-style-type: none
    gap: 20px
    li.bread-item
        &:not(:last-child)::after
            content: ">"
            margin-left: 20px

这种写法不会给最后一个li生成伪元素，也就不需要后续清除，代码更简洁。

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