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的样式如下