SASS，如何：::之后的最后一個孩子

Question

有人可以解釋它是如何在 SASS 上工作的嗎？

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

我正在嘗試從 ul 列表中的 li 中刪除最后一個 after 元素

Answer 1

:last-child問“我是最后一個孩子嗎？”，而不是“這個元素的最后一個孩子是什么？”。 考慮到這一點，您可以看到您的目標是ul元素，這些元素是其父元素的最后一個子元素。 您所要做的就是縮進規則，使其指向 li。

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

這將按照您的預期工作，並從最后一個li中刪除> 。