3-Vue中关于style的scoped问题

昨天在写代码时遇到了问题，为了使样式不会覆盖其余的页面，在 style 中添加了scoped 即<style scoped>，自定义样式，但是对某一元素进行样式修改时不起作用，纠结到最后，另添加了一个style，进行了重新定义，一个页面中定义了两个style，即

<style scoped>
  .dialog-margin {
    margin-left: 20px;
    color: #ffffff;
    border: none;
    width: 130px;
    height: 40px;
  }
</style>
<style>
  .myClass .el-input__inner {    //自定义引用的方法
    background-color: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid #15285b !important;
    color: #ffffff !important;
    font-size: 12px;
  }
  .el-dialog__body /deep/ .el-form .el-form-item{   //elmentui的控件修改
     color: #ffffff !important;
  }
</style>

    注：另外在后定义的style中，如果对第三方控件的样式进行修改（这里使用的是 elmentui ），重新定义无效，需要在谷歌浏览器开发者模式下（这里快捷键是F12）查看控件的层级结构，找到当前控件的位置，在其第一层的 class 后写 /deep/ （只有第一层的需要）随后按照层级结构依次向下添加，直到当前控件位置，标注！important 权重，就ok了

   只是简单的理解，若有错误还望谅解指正！