如何删除离子列表中最后一个离子项的边框

【问题标题】：How can I remove the border from the last ion-item in an ion-list如何删除离子列表中最后一个离子项的边框
【发布时间】：2023-01-12 01:46:00
【问题描述】：

我有一个动态填充的离子项目的标准离子列表。

<ion-list>
   <ion-item></ion-item>
   <ion-item></ion-item>
   <ion-item></ion-item>
</ion-list>

我想这样做，以便标准边框不会出现在列表中的最后一个离子项目上。

我已经尝试了以下但它只是从每个项目中删除了边框。

 ion-list ion-item:last-child{
    --inner-border-width:0;
  }

【问题讨论】：

【解决方案1】：

下面的代码在它不是最后一个项目时分配一个边框，而不是尝试从最后一个项目中删除边框。

因为我不知道边界应该是什么样子，所以我不得不做一些假设。

ion-item:not(:last-child) {
  border: 1px solid red;
}

<ion-list>
  <ion-item>1</ion-item>
  <ion-item>2</ion-item>
  <ion-item>3</ion-item>
</ion-list>

【讨论】：

框架默认分配一个边框。所以我尝试默认删除边框，然后尝试了您的解决方案。这导致根本不显示任何边框。离子项目{ --inner-border-width:0; } ion-item:not(:last-child) { --inner-border-width:1px; --边框颜色: var(--ion-color-step-150); }