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?