CSS为类添加:after实现链接分隔符，:last-child失效问题求助

嘿，这个问题我碰到过好多次！咱们一步一步来解决它～

首先，先聊聊为什么你之前移除最后一个分隔符的方法没生效——大概率是选择器匹配的问题。比如如果你的链接父容器里除了<a>标签还有其他元素（比如<span>、<i>之类的），那用:last-child就不会选中最后一个链接，因为它只会匹配父元素的最后一个子元素，不管类型。

下面给你两种靠谱的解决方案，按需选就行：

方案1：精准匹配最后一个链接（用:last-of-type） #

如果你的父容器里有其他子元素，但你只想针对最后一个<a>标签移除分隔符，把:last-child换成:last-of-type就搞定了：

/* 给所有链接后面加分隔符 */
.target-class a:after {
  content: "|";
  margin: 0 10px; /* 加个间距更美观 */
}

/* 移除第一个链接的分隔符 */
.target-class a:first-child:after {
  content: none;
}

/* 移除最后一个链接的分隔符 */
.target-class a:last-of-type:after {
  content: none;
}

:last-of-type会精准匹配父元素里同类型的最后一个子元素，不管后面有没有其他类型的元素，完美解决父容器有其他子元素的情况。

方案2：更巧妙的思路——只在相邻链接之间加分隔符 #

其实还有个更省心的写法，完全不用管第一个和最后一个，利用相邻兄弟选择器，只在前面有兄弟链接的元素前加分隔符：

.target-class a + a:before {
  content: "|";
  margin: 0 10px;
}

这个逻辑是：只有当一个链接前面紧跟着另一个链接的时候，才在它前面加|。这样第一个链接前面没有兄弟，自然不会加分隔符；最后一个链接后面没有兄弟，也不会被选中。一步到位，代码更简洁，还不容易踩选择器的坑！

如果你之前用的是:last-child没生效，换成:last-of-type试试；要是想省事儿，直接用方案2就行，我自己平时做项目都爱用这个方法～

内容的提问来源于stack exchange，提问作者happycoding