Angular中如何移除自定义组件最后子元素的底部边框？

你的问题出在CSS选择器写法和样式优先级上，以下是两种可行的解决方式：

方式一：修正CSS选择器并覆盖内联样式 #

原选择器存在两个关键问题：

• :last-child前面多了空格，导致选择器语法失效
• 选择顺序错误，应该先定位容器内最后一个custom-comp，再选中它内部的.custom-container

同时因为.custom-container使用了内联样式，优先级高于普通CSS规则，需要用!important来强制覆盖，修正后的代码如下：

::ng-deep .container custom-comp:last-child .custom-container {
  border-bottom: none !important;
}

方式二：组件化控制（推荐，避免依赖::ng-deep） #

::ng-deep属于Angular的过时特性，更符合组件化思想的方式是给custom-comp添加输入属性，自主控制内部边框显示：

1. 在custom-comp组件中添加输入属性：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'custom-comp',
  template: `
    <div class="custom-container" [style.border-bottom]="showBorder ? 'solid 1px red' : 'none'">
      <!-- 组件内容 -->
    </div>
  `
})
export class CustomCompComponent {
  @Input() showBorder = true;
}

2. 在父组件中给最后一个custom-comp传入关闭边框的参数：

<div class="container">
    <custom-comp></custom-comp>
    <custom-comp [showBorder]="false"></custom-comp>
</div>

这种方式既避免了样式污染问题，也更贴合Angular的组件设计逻辑。

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