1、问题

使用 vue 时写发现某些样式不生效，怎么都不生效， 不过将style 中的 scoped 去掉后，居然生效了。但是一般都应该加上scoped，那该如何处理呢？

<template>

    <div class="app-container">
      <heads />
      <div class="login-body">
        <el-steps :active="active" finish-status="success" size="medium" :space="400" :align-center="true" style="width: 800px">
          <el-step title="创建帐户" />
          <el-step title="完善信息"/>
          <el-step title="注册成功"/>
        </el-steps>
        <!--创建帐户-->
        <el-card class="card" style="margin-top: 50px;width:1000px;">
          <account v-if="active==1" :obj="obj" ref="account" @clickNext="next($event)"/>

          <!--完善信息-->
          <info
                  v-if="active==2 "
                  ref="info"
                  :obj="obj"
                  @click="closeDialog()"
                  @clickPrev="prev($event)"
                  @clickNext="next"/>

          <!--注册成功-->
          <success
                  v-if="active==3"
                  ref="success"
                  @clickPrev="prev()"/>

        </el-card>
        <!--    </el-dialog>-->
      </div>
      <bottom />
    </div>

<!--  </div>-->
</template>

效果如下：

添加scoped与不添加scoped时样式的区别：

 不添加scoped:

添加scoped:

2、原因：

vue的scoped为本组件的所有标签都打上了一个唯一attribute，如上图的红框内的data-v-ee52e422,有data-v-ee52e422的标签都是本组件的标签，样式生效时也带上了这唯一的attribute，但是本组件的所有子组件，除根标签el-step以外其他都未打上这唯一标签，因此样式自然不会生效。

3、解决办法

vue给出的解决办法是： 深度作用选择器

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。

通常我们会选择/deep/，使用方式如下，在需要子组件样式生效的地方加上/deep/

.login-body {
    width: 100%;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /deep/.el-step__icon{
          width: 50px;
          height: 50px;
        }
  }

或者

.login-body {
    width: 100%;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    ::v-deep .el-step__icon{
          width: 50px;
          height: 50px;
        }
  }

效果如下：

 修改线的位置

.login-body {
    width: 100%;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    ::v-deep .el-step__icon{
          width: 50px;
          height: 50px;
        }
    ::v-deep .el-step__line{
      top: 25px;
    }
  }

其中el-step__line的样式如下