修改页面中的一个样式 仅在当前页面生效

Question

问题描述

校验的提示框出现在其他位置 怎么修改

问题出现的环境背景及自己尝试过哪些方法

尝试直接修改 样式 会修改掉全局的样式 怎么让这个样式仅在当前页面生效

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

 <FormItem :label="$t('containerQty')" :prop="'containerQtyCopy'"
            :rules="[ {required: true,validator:isContainerQtyExist, trigger: 'change' }]" style=" display:block;margin-left: 53px;width: 200px;" id="abc">
    <InputNumber :min="0" v-model="containerQtyCopy" size="small"/>
  </FormItem>    
.ivu-form-compact .ivu-form-item-error-tip{
    display: none;
    position: absolute;
    top: 120%;
    padding: 8px 12px;
    color: #fff;
    background: #ed4014;
    border-radius: 2px;
    z-index: 5;
    white-space: nowrap;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.2);
    box-shadow: 0 0 5px rgba(0,0,0,.2);
    margin-left:30px;
  }

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

用个div将要修改的元素包裹起来。然后全局中改动样式就OK

例如要修改这个input

<div class='test'>
    <input />
</div>

.test input{
    你的css
}

Answer 2

可以使用vue-loader自带的/deep/选择器

Answer 3

<style lang="less">
   #indexPage {
        xxx:{
            color:red
        }
   }
</style>