如何移除最后一个子元素的::after伪元素底部边框？

嘿，我来帮你搞定这个问题！你遇到的情况是每个.abc元素通过::after伪元素添加了底部边框，但想要移除最后一个元素的这个边框，之前的写法没生效是因为针对伪元素的选择逻辑不对——伪元素是依附于宿主元素的，得先准确选中最后一个.abc元素，再针对它的::after伪元素修改样式。

基础解决方案（父容器子元素全是.abc） #

如果你的父容器里所有子元素都是.abc类的div，直接用:last-child选择器就能精准定位最后一个元素，再取消它的伪元素边框：

HTML代码 #

<div>
  <div class="abc">Hello</div>
  <div class="abc">Hello</div>
  <div class="abc">Hello</div>
</div>

CSS代码 #

.abc::after {
  content: "";
  border-bottom: 1px solid #e1e1e1;
  display: block;
  margin-top: 32px;
}

/* 移除最后一个.abc的伪元素边框 */
.abc:last-child::after {
  border-bottom: none;
  /* 如果你想直接隐藏伪元素（连margin-top也去掉），可以用 display: none; */
  /* display: none; */
}

进阶解决方案（父容器有其他子元素） #

如果父容器里除了.abc元素还有其他类型的元素（比如p、span等），:last-child可能会选中最后一个非.abc的元素，这时候可以用CSS的:nth-last-child(1 of .abc)选择器，它能直接定位父元素里最后一个拥有.abc类的元素：

HTML代码示例 #

<div>
  <p>其他文本内容</p>
  <div class="abc">Hello</div>
  <div class="abc">Hello</div>
  <div class="abc">Hello</div>
  <span>其他元素</span>
</div>

CSS代码 #

.abc::after {
  content: "";
  border-bottom: 1px solid #e1e1e1;
  display: block;
  margin-top: 32px;
}

/* 精准选中最后一个.abc元素的伪元素 */
.abc:nth-last-child(1 of .abc)::after {
  border-bottom: none;
}

为什么你之前的写法没生效？ #

你尝试的.abc:after:not([style*="display..."])写法逻辑有误：not()里的条件是针对.abc元素本身的属性，但最后一个.abc元素并没有对应的style属性，而且这种写法没有区分“最后一个元素”的逻辑，自然无法精准定位到目标伪元素。

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