如何移除ion-list中最后一个ion-item的默认边框？

我懂你现在的困扰——本来想只去掉ion-list里最后一个ion-item的默认边框，结果写了ion-list ion-item:last-child的样式后，所有项的边框都没了。这多半是Ionic的Shadow DOM机制，或者选择器匹配的问题在搞鬼，给你几个靠谱的解决方案：

原因分析 #

Ionic的组件（比如ion-item）采用了Shadow DOM封装，直接在组件样式里写普通的CSS选择器，可能无法穿透到组件内部的边框元素。另外，如果你的列表里不小心混了其他类型的子元素（比如ion-divider），last-child会匹配到最后一个子元素，而不一定是最后一个ion-item，不过看你的示例代码应该不存在这个情况。

解决方案 #

方案1：使用Shadow DOM的::part选择器（推荐） #

Ionic官方为ion-item的内部边框元素暴露了part="inner-border"这个接口，我们可以直接针对这个部分设置样式：

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

这个方法符合Web Components的标准，不会有样式穿透的副作用，是最优解。

方案2：用样式穿透（适合Angular项目） #

如果你的项目是Angular，可以用::ng-deep来强制穿透Shadow DOM的封装，这样原来的变量设置就能生效：

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

注意：::ng-deep属于非标准特性，未来可能会被废弃，但目前在Ionic Angular项目里还是能用的。

方案3：改用last-of-type选择器 #

如果你的ion-list里只有ion-item作为子元素，用last-of-type会比last-child更精准，它只匹配同类型元素的最后一个：

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

这个方法在动态生成列表（比如用*ngFor循环）时也能稳定匹配到最后一项。

你可以根据自己的项目类型选一个试一下，应该就能解决问题了。

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