Angular 4中使用ngx-bootstrap无法移除标签页底部边框的问题

你的问题出在CSS选择器没有匹配到实际渲染的DOM元素，因为Angular组件（比如<tabset>、<tab>）最终会被编译成带特定类名的普通HTML元素，直接用组件标签作为选择器是无效的。

正确的解决方案： #

ngx-bootstrap的<tabset>渲染后，底部边框来自内部的ul.nav.nav-tabs元素，我们需要针对这个元素来写样式，同时还要处理Angular的样式隔离问题：

方案1：组件内使用::ng-deep穿透样式（适合组件级样式）

在你的组件CSS/SCSS文件中添加：

/* 移除标签栏的底部边框 */
::ng-deep .tabset .nav-tabs {
  border-bottom: none;
}

/* 自定义激活标签的文字颜色（替换你原来的tab>active样式） */
::ng-deep .tabset .nav-tabs .nav-item.active .nav-link {
  color: rgb(58, 45, 128);
  /* 可选：移除激活标签的底部边框，避免残留 */
  border-bottom: none;
}

方案2：全局样式文件中添加样式（无需穿透）

如果不想用::ng-deep，可以把样式放到项目根目录的styles.css（或styles.scss）里：

.tabset .nav-tabs {
  border-bottom: none;
}

.tabset .nav-tabs .nav-item.active .nav-link {
  color: rgb(58, 45, 128);
  border-bottom: none;
}

为什么原来的样式无效？ #

你原来写的tabset和tab>active是Angular组件的标签选择器，而浏览器最终渲染的是类似这样的结构：

<div class="tabset">
  <ul class="nav nav-tabs">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home</a>
    </li>
    <!-- 其他标签 -->
  </ul>
  <div class="tab-content">...</div>
</div>

所以直接用组件标签选择器找不到对应的元素，自然无法修改样式。

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