如何根据body标签的类为组件内嵌套<div>设置样式？

嘿，这个问题其实是Angular组件的样式隔离机制在搞鬼！

你之前的写法之所以无效，是因为Angular默认会给每个组件的样式加上独特的属性选择器（比如_ngcontent-xxx），相当于给你的样式加了“组件专属前缀”。当你写.myBodyClass .myClass时，它会被转换成类似.myBodyClass .myClass[_ngcontent-abc123]，但body标签不在这个组件的作用域里，根本带不上这个专属属性，所以样式匹配不到。

给你三种可行的解决方案，按推荐程度排序：

1. 使用:host-context()伪类选择器（最推荐） #

这是Angular专门为这种“基于外部上下文设置组件内样式”的场景设计的语法，它会检查当前组件的宿主元素（也就是<app-sidebar>）的所有祖先元素，只要找到带有.myBodyClass的元素（这里就是body），就会应用样式。

在你的<app-sidebar>组件的CSS文件里这么写：

.myClass {
  background-color: red;
}

/* 当body带有myBodyClass时，修改组件内的.myClass样式 */
:host-context(.myBodyClass) .myClass {
  background-color: yellow;
}

2. 禁用组件样式隔离（谨慎使用） #

如果你不需要这个组件的样式隔离，可以直接关掉它，这样你的原始写法就能生效，但要注意：组件内的样式会变成全局样式，容易和其他组件的样式冲突。

在<app-sidebar>的TS文件里修改组件配置：

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

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css'],
  encapsulation: ViewEncapsulation.None // 关闭样式隔离
})
export class SidebarComponent { }

然后CSS里保留你原来的写法就行：

.myClass{ background-color:red; }
.myBodyClass .myClass{ background-color:yellow; }

3. 写到全局样式文件里 #

把针对body类的样式放到Angular项目的全局样式文件（比如styles.css/styles.scss）中，全局样式不受组件隔离限制。

全局样式文件里写：

.myBodyClass app-sidebar .myClass {
  background-color: yellow;
}

组件内的样式保留默认的红色：

.myClass {
  background-color: red;
}

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