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

【问题标题】：Check if child is last - also include text nodes检查孩子是否是最后一个 - 还包括文本节点
【发布时间】：2017-10-09 15:56:37
【问题描述】：

我想检查父母的孩子是否是最后一个：（所以在我的情况下，我想选择.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 是否在文本之前/之后？

【问题讨论】：

你的意思是当且仅当它是 div 内的最后一件事时你才想选择图标？
@TemaniAfif 完全正确
@ovokuro 我认为我们的问题与您放置的链接不同
CSS selector based on element text?的可能重复
@ovokuro 不一定是文本节点......我们的想法是测试它是否是该 div 中可能包含文本的最后一个元素

标签： css css-selectors selector

【解决方案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>

【讨论】：

有效，但我不想更改 html 标记 - 无论如何谢谢 :)
不改变HTML标记，你唯一的选择就是JS（jquery或者插入标签）。另一个解决方案是改变你检测这个的方式（在父级上添加一个类等）。
当我有这样的事情时，我会避免使用元素来设置样式。我所做的是在父级上设置一个类，说明图标位置并使用 css 设置图标（如果只有一个图标）。这可以通过设置:before 和:after 或浮动:before 来完成