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

问题:同一个页面里,我用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 则不会受到这个样式的影响(除非你为它也指定了样式)。

相关推荐
OEC小胖胖5 小时前
去中心化身份:2025年Web3身份验证系统开发实践
前端·web3·去中心化·区块链
vvilkim5 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
ai小鬼头7 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz7 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子7 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边7 小时前
Cursor 进阶使用教程
前端·ai编程·cursor
清幽竹客7 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
知性的小mahua7 小时前
echarts+vue实现中国地图板块渲染+省市区跳转渲染
vue.js
weiweiweb8888 小时前
cesium加载Draco几何压缩数据
前端·javascript·vue.js
幼儿园技术家8 小时前
微信小店与微信小程序简单集成指南
前端