Question

我需要remove the last border of an element，但边框是使用after元素应用的。

我的代码：

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

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

我已使用以下代码尝试使用removing the border for after元素，但无效。

.abc:after:not([style*="display: none"]):last-child {
  border-bottom: none;
}

使用这种方法可以吗？ JSFiddle

Answer 1

试试这个

.abc:last-child:after{
  border-bottom:none;
}

Answer 2

根据伪元素的规范，您使用的选择器的问题是它无效：

每个选择器只能出现一个伪元素，如果存在，它必须出现在代表选择器主体的简单选择器序列之后。 <子> https://drafts.csswg.org/selectors-3/#pseudo-elements

因此您的选择器无效;而应该是：

.abc:after:not([style*="display: none"]):last-child

相反，因为您要为:last-child元素设置伪元素样式，所以您应该使用：

.abc:last-child::after

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

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

Answer 3

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

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

Answer 4

如果你不使用after，那么你也可以试试这个：

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

.abc:last-child {
  border-bottom: 0px;
}

将css应用于元素最后一个孩子之后

4 个答案: