为何设置了固定色值的文本会随Mat-Slider显隐发生颜色变化

原因说明 #

• 最高发的场景是存在相邻兄弟选择器的CSS规则：你的文本div是mat-slider的直接下邻兄弟元素，mat-slider在渲染时会自动带上mat-primary/mat-accent这类主题类名，如果你的样式表里有类似.mat-slider + div、.mat-primary ~ *这类兄弟选择器规则，就会在mat-slider显示时命中后续的文本div，修改它的颜色。这类兄弟选择器的规则很容易在排查样式覆盖时被忽略，因为你可能只会检查元素本身、父级节点的样式，不会注意到前置兄弟节点的类名影响。
• 快速定位方法：打开浏览器开发者工具，选中文本div，切换到「计算样式」面板，找到color属性，就能直接看到该样式的来源和具体规则，一步定位问题。
• 其他小概率可能：你自定义Angular Material主题时错误编写了全局作用域的div颜色规则，仅当mat-slider组件加载（触发主题样式注入）时才会生效；或者isVisible状态的切换逻辑同时联动了全局主题切换的逻辑，可以排查下isVisible相关的业务代码是否有额外的样式修改操作。

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