Problems with CSS3 selector

encountered such a problem in the project:

:
<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 the two selectors select the same node, and the writing of the result 2 can take effect.

output: "Hello!" Welcome to Shenzhen Motor Co., Ltd. [login | logout] reserved question bar | reserved question bar | submit current effect map.

but 1 fails, and the output: "Hello!" Welcome to Shenzhen Automobile Co., Ltd. [log in and log in] reserve question bar to submit current picture

Why is this?

Jun.22,2021

the first is not the last an element under span. There is only one a tag under each span tag, and the second is to select the a tag under the span tag that is not the last


.

a has no sibling element, last-child is always in effect

<span><a href=""></a></span>
<span><a href=""></a></span>

.container>div>span>a:not(:last-child)::after{
    content: "|";
}
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b30627-2bd27.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b30627-2bd27.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?