Angular视图封装默认启用Emulated模式，通过添加\_ngcontent属性选择器实现样式隔离，导致全局CSS类（如.btn）无法匹配第三方组件元素；解决方案是将样式写入全局styles.css、谨慎使用::ng-deep或覆盖Bootstrap CSS变量。
Angular视图封装阻断样式穿透
Bootstrap的CSS类（如 .btn、.navbar-brand）是全局定义的，但Angular组件默认启用 ViewEncapsulation.Emulated，会为组件内样式自动添加属性选择器（如 _ngcontent-ng-c123），导致你写的 .btn { color: red; } 实际编译成 .btn[_ngcontent-ng-c123] { ... }——而DOM中Bootstrap的按钮元素没有这个属性，自然不匹配。
常见现象：组件模板里写了 <button class="btn btn-primary">，开发者工具里能看到类名存在，但Computed面板中所有Bootstrap样式都显示为“未生效”或被划掉；Styles面板里你的规则带删除线。
- 不是选择器写错，而是作用域根本没覆盖到目标元素
- 不是权重不够，而是规则压根没参与层叠计算
- 哪怕加了
!important，也只作用于带封装属性的子集，对第三方组件内部无效
全局样式文件才是安全出口
把覆盖规则写进项目级全局样式（如 src/styles.css 或 src/styles.scss），它不经过任何封装处理，直接注入 <head>，能真正影响所有DOM节点，包括Bootstrap组件内部结构。
例如想改所有下拉框标签文字颜色：
立即学习“前端免费学习笔记（深入）”；
/* src/styles.css */
.p-dropdown-label {
color: #1e40af !important;
}
注意点：
- 必须用PrimeNG、Bootstrap等库暴露的官方类名（如
.p-dropdown-label、.btn-primary），别自己瞎猜 - 避免泛化选择器（如
button），否则可能污染其他UI库 - Angular CLI构建时，
styles.css会被自动打包进主CSS bundle，无需额外配置
别碰 ::ng-deep，除非临时救急
::ng-deep 是Angular为向下兼容保留的穿透伪类，但它已被标记为废弃，未来版本会移除。目前它还能用，但行为不稳定：
- 必须紧接在
:host后使用，单独写::ng-deep .btn无效 - Vite + Angular 17+ 中可能被PostCSS插件提前剥离
- 一旦启用，该规则会泄漏到整个应用，失去组件边界
如果非要用，只限调试阶段，且务必加注释说明：
:host ::ng-deep .my-card .card-body {
padding: 1rem;
}
Bootstrap变量覆盖比硬写CSS更可靠
Bootstrap 5+ 全面转向CSS自定义属性（--bs-*），这才是官方推荐的定制方式。它不依赖选择器权重，也不受封装限制，只要在Bootstrap CSS之后、其他样式之前注入变量即可生效。
正确顺序（在 styles.css 顶部）：
:root {
--bs-btn-color: #0f172a;
--bs-btn-bg: #6366f1;
--bs-btn-border-color: #4f46e5;
}
关键细节：
- 变量必须定义在
:root，不能在组件级style标签里 - 变量名以
--bs-开头，完整列表查 Bootstrap 源码里的_variables.scss - 若用Sass，应在
@import "bootstrap/scss/functions"之后、@import "bootstrap/scss/bootstrap"之前定义变量
真正容易被忽略的是：很多团队花几小时调选择器权重，却没检查过 styles.css 是否真的被Angular CLI加载——打开构建产物中的 main.XXX.css，搜索 --bs-btn-bg，不存在就说明路径配置错了。
