Angular组件：如何为后代应用CSS样式但排除指定子组件？

一、基于CSS/SCSS的优化实现 #

1. 先全局设置再重置例外组件（最直观易维护） #

这种方式先通过::ng-deep统一设置所有p标签的行高，再单独重置foobar组件内的p样式，逻辑清晰，新增排除组件时只需追加重置规则即可：

:host {
  ::ng-deep {
    // 统一设置所有p的行高
    p {
      line-height: 2em;
    }

    // 重置foobar组件内的p为默认值（或自定义值）
    foobar p {
      line-height: initial; // 也可替换为你需要的默认行高，比如1.5em
    }
  }
}

2. 使用:has()选择器（现代浏览器支持） #

利用CSS的:has()伪类精准筛选没有foobar祖先元素的p标签，无需逐个写排除规则，但需注意浏览器兼容性（Chrome 105+、Firefox 121+、Safari 15.4+）：

:host {
  ::ng-deep {
    p:not(:has(ancestor foobar)) {
      line-height: 2em;
    }
  }
}

二、Angular专属解决方案（不关闭视图封装） #

1. 利用CSS变量实现灵活控制 #

通过定义CSS变量，父组件控制全局行高，需要例外的子组件只需重写变量即可，完全符合组件化思想：

• 父组件SCSS：

:host {
  // 定义全局行高变量
  --p-line-height: 2em;

  ::ng-deep {
    p {
      line-height: var(--p-line-height);
    }
  }
}

• foobar子组件SCSS：

:host {
  // 重写变量，覆盖父组件的全局设置
  --p-line-height: initial; // 或自定义行高值
}

2. 子组件本地样式覆盖穿透样式 #

Angular的视图封装机制下，子组件的本地样式优先级高于父组件的::ng-deep规则（只要选择器优先级足够），让foobar组件自己维护内部p标签的样式：

• foobar子组件SCSS：

:host p {
  line-height: 1.5em; // 你的默认行高值
}

这种方式无需修改父组件代码，完全由子组件自主控制内部样式，更符合组件封装的职责划分。

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