html - 选择最后一个没有指定类(class)的 child

Question

我有这个 css-selector

.buttons:last-child::not(a.hide)

<div class="buttons">
<a href="#tab1">1</a>
<a href="#tab2">3</a>
<a href="#tab3" class="hide">3</a>
</div>

我想选择最后一个没有“.hide”类的 child 。

但它不起作用。怎么了？

Answer 1

很多是错误的:

• not 只接受简单的选择器，因此要么是一个元素要么一个类。对于您的示例，not(.hide) 应该可以完成这项工作。

• not(.hide) 不是伪元素，是伪类。因此，它前面应该有一个冒号，而不是两个冒号

• .button:last-child 不选择 .buttons 的最后一个子元素，它选择类 .buttons 的任何元素> 那是它 parent 的最后一个 child 。要选择按钮中的最后一个 a，请使用 .buttons>a:last-child

• 组合伪选择器要求候选人将它们全部匹配。所以 :last-child:not(.hide) 将选择都是最后一个子并且不属于 hide< 类的元素。其中你没有。更改 css 或 html 中的类名，您将匹配最终元素。

事实上，我不确定您是否可以使用纯 css 实现您想要的。