同一个页面击穿element样式后，会影响同样组件的使用

卡布叻_星星2024-11-06 12:49

问题：同一个页面里，我用deep击穿第一个dialog后，怎么不影响第二个dialog。

解决：使用更具体的选择器

给新的对话框一个特定的类名或者ID，然后为这个类名或ID下的 .el-dialog 使用 :deep() 选择器。这样，样式将只会应用到指定的对话框上。

html 复制代码

<!-- 新的对话框 -->  
<div class="dialog-new-box">  
  <el-dialog>...</el-dialog>  
</div>

css 复制代码

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