CSS:last-of-type与以下组合不兼容:not

Question

我有一些行为与提供的代码片段相同.我有一个项目列表,当选择一个项目时,我希望那个项目显示在列表的顶部,我可以通过flex命令轻松完成.一次只能选择一个.但由于每个列表元素都有边框,因此最后一个元素不应该有边框.li:last-of-type在大多数情况下,只使用工作正常,除非它是最后选择的列表项.

我已经尝试了几个选择器,它们应该选择没有给定类的无序列表中的最后一个列表项,但last-of-type选择器似乎没有正常运行.

如果代码中不清楚,我所指的选择器是.selection li:not(.selected):last-of-type.问题是列表底部的双边框.它应该是来自无序列表元素的单个边框.

.selection ul {
  display: flex;
  flex-direction: column;
  border: .15rem solid #666;
}

.selection li {
  order: 2;
  border-bottom: .15rem dashed #666;
}

.selection li.selected {
  order: 1;
}

/** This selector should work in my mind, but it doesn't **/
.selection li:not(.selected):last-of-type {
  border-bottom: none;
}

/** Non-important styles to put it into context **/
ul { list-style: none; padding: 0; width: 25%; margin: 2rem auto; }
li { padding: 1rem 2rem; background-color: #ebebeb; }
li:hover { background-color: #ccc; }
a { color: inherit; text-decoration: none; }

<div class="selection">
  <ul>
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li class="selected">3</li>
  </ul>
</div>

我还创建了此Codepen代码段来演示此问题.

我有一种感觉这是:last-of-type选择器的问题,也许我使用它错了,但在我看来,上面的选择器应该工作.

任何有关如何解决此问题的帮助或见解,或选择元素的其他方式,或洞察为什么这不起作用将不胜感激.

Answer 1

考虑这种替代方法:

• :not彻底摆脱选择器
• ul仅在左侧,右侧和顶部给出边框
• 仅将底部边框应用于 li

ul {
    display: flex;
    flex-direction: column;
    border-top: .15rem solid #666;
    border-left: .15rem solid #666;
    border-right: .15rem solid #666;
}

li { border-bottom: .15rem solid #666; }

修改了Codepen

这就是你的选择器无法工作的原因:

.selection li:not(.selected):last-of-type { border-bottom: none; }

在我看来,li只要它没有类,你就说你要匹配最后一个元素selected.

但这不是多么last-of-type有效.如果li是兄弟,选择器将匹配它,无论如何class.选择器匹配DOM元素.这意味着即使您应用于display: nonea li,选择器仍然会匹配它.

6.6.5.9.:last-of-type伪类

该:last-of-type伪类表示是其在它的父元素的孩子的列表类型的最后一个同级的元素.

_{来源:https: //drafts.c​​sswg.org/selectors-3/#last-of-type-pseudo}

更多细节:如何让nth-child选择器跳过隐藏的div