在Vue 2中,.el-form-item__label
选择器可能无法直接生效,因为Vue组件的样式作用域默认是封闭的,这意味着组件的样式只会应用于组件内部,并不会影响子组件或祖先组件。
为了在Vue 2中修改.el-form-item__label
的样式,您可以使用以下方法:
- 使用
/deep/
或>>>
选择器:在您的Vue组件的样式部分中,使用/deep/
或>>>
选择器来穿透组件的样式作用域。例如:
<style scoped>
/deep/ .el-form-item__label {
color: red;
}
</style>
<style scoped>
>>> .el-form-item__label {
color: red;
}
</style>
- 使用
::v-deep
选择器:在Vue 2.6.0及更高版本中,您可以使用::v-deep
选择器来穿透组件的样式作用域。例如:
<style scoped>
::v-deep .el-form-item__label {
color: red;
}
</style>
请注意,以上方法中的选择器穿透可能会在将来的Vue版本中被废弃,因为Vue 3已经引入了更改的样式作用域机制。如果您使用的是Vue 2,并且以上方法无效,您可以考虑为.el-form-item__label
添加一个自定义的class,并在Vue组件中使用该class来修改样式。
示例:
<el-form :inline="true" :model="addInsuranceForm" :rules="rules">
<!-- 案件信息 -->
<el-row><el-form-item label="一、案件信息" class="biaoti"></el-form-item></el-row>
<el-row>
<el-col :span="12">
<el-form-item label="地州:" class="red">
<el-select placeholder="请选择"></el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="区县:" class="red" prop="county">
<el-select placeholder="请选择"></el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
将Labe标签的字体改成红色
.red::v-deep .el-form-item__label {
color: red;
}
效果: