如何仅修改当前页面Treeview中fa-minus-square-o的颜色（不影响其他页面）

我明白你的痛点了——全局修改fa-minus-square-o的样式会牵连到另一个页面的Treeview，咱们得做样式隔离，只让当前页面的这个图标变成白色。这里有几个靠谱的方案，你可以根据项目情况选择：

方案一：给当前页面的Treeview加专属容器类 #

这是最直接的方法，给当前页面的Treeview外层套一个自定义类，比如page-specific-treeview，用它来限定样式的作用范围：

首先修改HTML结构，给Treeview容器添加专属类：

<div class="treeview page-specific-treeview">
  <!-- 你的Treeview内容 -->
  <i ng-class="{'fa-plus-square-o': !isExpanded, 'fa-minus-square-o': isExpanded}" class="fa"></i>
</div>

然后编写带前缀的CSS，这样样式只会作用在这个容器下的图标：

/* 仅当前页面Treeview里的减号图标变白 */
.page-specific-treeview .fa-minus-square-o {
  color: #ffffff;
}

方案二：利用Angular组件的视图封装（如果是组件化Treeview） #

如果你的Treeview是一个Angular组件，那Angular本身自带样式隔离能力。默认情况下Angular组件的样式是ViewEncapsulation.Emulated模式，会自动给组件内的样式添加专属前缀，不会污染全局样式。

你只需要在当前页面对应的组件CSS文件里直接写：

.fa-minus-square-o {
  color: #ffffff;
}

这个样式只会作用在当前组件内的元素上，完全不会影响另一个页面的Treeview，省心又高效。

方案三：给图标加条件专属类 #

要是不想修改容器结构，也可以给图标本身加一个仅在展开状态生效的自定义类，结合ng-class一起使用：

修改图标元素的ng-class属性：

<i 
  ng-class="{'fa-plus-square-o': !isExpanded, 'fa-minus-square-o': isExpanded, 'white-minus-icon': isExpanded}" 
  class="fa"
></i>

然后编写对应的CSS：

.white-minus-icon {
  color: #ffffff;
}

这种方式更精准，直接针对展开状态的图标设置样式，同样不会影响其他页面的同类型图标。

这几个方案都能完美解决你的问题，选最适合你项目结构的就行~

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