检查孩子是否是最后一个 - 也包括文本节点

Question

我想检查父母的孩子是否是最后一个： （所以在我的情况下，如果它是.icon中的最后一个元素/节点，我想选择.button

<a href="" class="button">
    <i class="icon"></i>
    Button
</a>
<a href="" class="button">
    Button
    <i class="icon"></i>
</a>

我尝试过这样做：.button .icon:last-child也:last-of-type

但是选择器会忽略文本节点 - 有没有办法检测.icon是否在文本之前/之后？

Answer 1

将Text节点放在元素

中

.icon:last-child {
  color: red;
}

<a href="" class="button">
    <i class="icon">Not last child</i>
    <span>Button</span>
</a><br />
<a href="" class="button">
    <span>Button</span>
    <i class="icon">Last child</i>
</a>