同一个页面击穿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 则不会受到这个样式的影响（除非你为它也指定了样式）。