Angular 19 如何仅为特定嵌套结构中的Material选择组件下拉箭头设置样式

我来帮你搞定这个样式定位的问题～你当前的代码之所以会给页面上所有的Material选择器下拉箭头加上边框，是因为::ng-deep没有结合父级的类选择器做范围限制，导致样式穿透后影响了所有匹配的.mat-mdc-select-arrow元素。

要精准锁定你需要的嵌套结构（.panel-group > .panel-details > .panel-select）里的下拉箭头，只需要把父级的选择器串联到::ng-deep后面，像这样写：

:host ::ng-deep .panel-group > .panel-details > .panel-select .mat-mdc-select-arrow {
  border: 3px solid red;
}

代码说明： #

• :host：确保样式只作用于当前组件内部，不会意外污染全局样式
• ::ng-deep：穿透Angular的组件样式隔离，让样式能作用到Material组件内部的元素
• .panel-group > .panel-details > .panel-select：使用直接子元素选择器>精准匹配你描述的嵌套结构，确保只有符合这个层级的容器内的选择器箭头才会被选中
• .mat-mdc-select-arrow：最终要修改样式的Material选择器下拉箭头元素

这样写之后，就只有你指定的嵌套结构里的选择器箭头会显示红色边框，其他页面上的选择器不会受到影响啦。

内容来源于stack exchange