html - 使用 css last-child 改变边框

Question

是否可以使用 CSS last-child 来做到这一点？

我可以使用相同的类来添加 last-child 并将第二个边框设为更小的 px 吗？或者唯一的方法是添加不同的类名？

.border {
  border: 3px solid black;
  width: 80px;
  display: inline-block;
}

<div class="border"></div>
<div class="border"></div>

Answer 1

您需要包装 border div，然后使用 :last-child 可以实现此目的。

The reason behind using wrapper is :last-child will only try to match the very last child of a parent element

.border {
  border: 3px solid black;
  width: 80px;
  display: inline-block;
}

.border:last-child {
  width: 40px;
}

<div class="wrapper">
  <div class="border"></div>
  <div class="border"></div>
</div>