css - 检查 child 是否是最后一个 - 还包括文本节点

Question

我想检查 parent child 是否是最后一个: (所以在我的例子中，如果它是父 .button 中的最后一个元素/节点，我想选择 .icon)

<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

将文本节点放在元素中

.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>