场景： Element UI 或 Element Plus 组件库如何灵活处理 el-input 和 el-select 组件禁用状态下的字体颜色？
一、静态样式修改 - 使用 ::v-deep 穿透组件样式
在 Element UI 或 Element Plus 中，当我们给 el-input 或 el-select 添加 :disabled="true" 属性时，其字体颜色会变为暗色以表示禁用状态。
如果要将禁用状态下的字体颜色更改为红色，可以通过 CSS 选择器穿透来实现：
/* Vue 2.x + Element UI */
.el-input.is-disabled /deep/ .el-input__inner,
.el-select.is-disabled /deep/ .el-input__inner {
color: red !important;
}
/* Vue 3.x + Element Plus */
.el-input.is-disabled ::v-deep .el-input__inner,
.el-select.is-disabled ::v-deep .el-input__inner {
color: red !important;
}
这里的::v-deep 或 /deep/可以修改 el-input内部 el-input__inner 元素的颜色，但不能修改 el-select 的颜色 ，需要将::v-deep 或 /deep/提前。
/* Vue 2.x + Element UI */
/deep/ .el-input.is-disabled.el-input__inner,
.el-select.is-disabled /deep/ .el-input__inner {
color: red !important;
}
/* Vue 3.x + Element Plus */
::v-deep .el-input.is-disabled .el-input__inner,
.el-select.is-disabled ::v-deep .el-input__inner {
color: red !important;
}
二、选择器的优先级和匹配顺序
在Vue单文件组件(SFC)的scoped CSS中，.el-input.is-disabled ::v-deep .el-input__inner和::v-deep .el-input.is-disabled .el-input__inner两个选择器目的相似，都是穿透 Scoped CSS 作用域修改内部.el-input__inner的样式。
想象一下，你有一栋房子（组件），这栋房子里有个特别的房间（.el-input__inner），有时候这个房间会被标记为“禁止入内”（.is-disabled）。你想要在特定情况下改变这个房间的装饰（样式），但是你的装修规定只能在自己家里生效（scoped CSS）。
现在你有两个装修方案：
-
先找到所有贴了“禁止入内”牌子的房子（.el-input.is-disabled），然后跟管家说：“请帮我改造这些房子里的特别房间（.el-input__inner）”。这就是
.el-input.is-disabled ::v-deep .el-input__inner的意思，它先认准了状态（禁止入内），再进行内部装修。 -
另一个方案是，你告诉管家：“不管房子什么状态，只要里面有个特别房间并且整个房子被标记为‘禁止入内’，你就改造那个房间。” 这就是
::v-deep .el-input.is-disabled .el-input__inner，它先穿透所有楼层（无视作用域限制），找到符合条件的房子和房间，再去装修。
两个方案都能达到目的，但第一个更直接针对已知状态的房子，第二个则是在所有可能的地方找符合条件的房间进行改造。
三、动态添加样式 - 使用 Vue 实例属性
使用 Vue 实例 $style 属性（仅限 Vue 2.x）修改属性：
// 在 Vue 组件中
export default {
data() {
return {
dynamicStyle: {
}
};
},
created() {
this.updateDynamicStyle();
},
methods: {
updateDynamicStyle() {
// 创建模拟 CSS 样式对象（但这并不能应用于穿透子组件）
const styleObject = {
'.el-input.is-disabled .el-input__inner': {
color: 'red !important' // 注意这里没有使用 ::v-deep，因为 $style 不支持穿透
}
};
// 合并到组件的 $style 属性
this.dynamicStyle = Object.assign({
}, this.dynamicStyle, styleObject);
}
}
};
然后在模板中引用：
<div :style="dynamicStyle">
<!-- el-input 和 el-select 等组件 -->
</div>
四、区别总结
::v-deep或/deep/选择器是在 CSS 中穿透组件作用域修改子组件样式的一种手段，特别适用于 Element UI 和 Element Plus 组件库。- 动态添加样式（如通过
$style）适用于在运行时调整组件实例自身的样式，但不适用于穿透到子组件的样式。