CSS中 .aa > .bb:first-child:not(:last-child)这个选择器的问题

Question

<div class="aa">
<div class="bb">
<div class="cc"></div>
<div class="dd"></div>
<div class="ee"></div>
</div>
<div class="bb"></div>
<div class="bb"></div>
</div>
.aa > .bb:first-child:not(:last-child){border: solid;}
这个选择器为什么选择的不是.aa下的第一个子元素bb下的除了最后一个子元素
其他所有子元素？而是选择bb？

Answer 1

.aa > .bb:first-child>div:not(:last-child){}

这样呢？

Answer 2

那个选择器的意思是:
选择.aa直接相邻的一级子元素且类名为.bb且是第一个子元素且不是最后一个子元素…

所以当然是选到.bb啦~

一楼是你想要实现的正确选择器

Answer 3

.aa > .bb:first-child :not(:last-child)   

//:not前面加一个空格代表下一级元素，不加空格代表同一级元素