同一个页面击穿element样式后，会影响同样组件的使用
问题：同一个页面里，我用deep击穿第一个dialog后，怎么不影响第二个dialog。
解决：使用更具体的选择器
给新的对话框一个特定的类名或者ID，然后为这个类名或ID下的 .el-dialog 使用 :deep() 选择器。这样，样式将只会应用到指定的对话框上。
<!-- 新的对话框 -->
<div class="dialog-new-box">
<el-dialog>...</el-dialog>
</div>
.dialog-login-box :deep(.el-dialog) {
background-color: transparent;
}
.dialog-new-box :deep(.el-dialog) {
/* 这里可以定义新的样式，或者不使用任何特殊样式 */
}
:deep(.el-dialog__body) {
width: 20vw;
margin: auto;
background-color: #f6f6f6;
}
在这个例子中，.dialog-login-box 下的 .el-dialog 会有透明的背景色，而 .dialog-new-box 下的 .el-dialog 则不会受到这个样式的影响（除非你为它也指定了样式）。