vue 覆盖elementUI的样式，如覆盖el-form表单的样式

vue 覆盖elementUI的样式，如覆盖el-form表单的样式

例如：el-form 表单中的 el-form-item，修改校验后的错误信息样式

实现：

<template>
    <div>
        <el-form :model="addForm" :rules="rules" class="demo-ruleForm">
            <el-form-item prop="userName">
              <el-input type="text" v-model="addForm.userName" placeholder="输入姓名"></el-input>
            </el-form-item>
        </el-form>
   </div>
</template>
<script>
  export default {
    data() {
        return {
            addForm: {
                userName: ''
            },
            rules: {
              userName: [
                {required: true, message: '请输入用户姓名', trigger: 'blur'},
              ],
            }
        },
    }
    methods: {},
    mounted() {}
</script>
<style lang="less">
  .demo-ruleForm{
    .el-form-item__content > .el-form-item__error {
      left: 40px !important;
    }
  }
</style>

这其中重要的样式代码如下：

  .demo-ruleForm{
    .el-form-item__content > .el-form-item__error {
      left: 40px !important;
    }
  }

说明：

css中“>”是:

　　css3特有的选择器，A>B 表示选择A元素的所有子B元素。

　　与A B的区别在于，A B选择所有后代元素，而A>B只选择一代。