CSS3选择器的问题

Question

在项目中遇到了这样一个问题：

有这样一个结构：

<div class="container">
        <div>
            <span>您好!欢迎光临深圳车行</span>
            <span>[<a href="">登录</a></span>
            <span><a href="">退出登录</a>]</span>
        </div>
        <div>
            <span><a href="">预留问题栏</a></span>
            <span><a href="">预留问题栏</a></span>
            <span><a href="">提交当前效果图</a></span>
        </div>
        
        然后CSS选择器如下：
        1. .container>div>span>a:not(:last-child)::after{
             content: "|";
             }
        2. .container>div>span:not(:last-child)>a::after{
            content: "|";
            }

1,2两个选择器选择的是同样的节点，结果2的写法能够生效，

输出：“您好!欢迎光临深圳车行 [登录|退出登录]预留问题栏|预留问题栏|提交当前效果图”。

但是1就失效了，输出：“您好!欢迎光临深圳车行 [登录 退出登录]预留问题栏 预留问题栏 提交当前效图”

这是为啥？

Answer 1

第一个是选择span下面不是最后一个a元素，您每个span标签下面只有一个a标签呀，第二个是选中不是最后一个的span标签下面的a标签

Answer 2

a 没有兄弟元素，last-child一直生效的

<span><a href="">预留问题栏</a></span>
<span><a href="">预留问题栏</a></span>

.container>div>span>a:not(:last-child)::after{
    content: "|";
}