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

相关推荐
摇头的金丝猴7 分钟前
uniapp vue3 使用echarts-gl 绘画3d图表
前端·uni-app·echarts
清清ww19 分钟前
【TS】九天学会TS语法---计划篇
前端·typescript
南棱笑笑生43 分钟前
20241105编译Rockchip原厂的Android13并给荣品PRO-RK3566开发板刷机
java·开发语言·前端
dy171744 分钟前
el-date-picker日期选择器动态设置日期
前端·vue.js·elementui
浏览器爱好者1 小时前
Chrome与火狐哪个浏览器的性能表现更好
前端·chrome
Topstip1 小时前
在 Google Chrome 上查找并安装 SearchGPT 扩展
前端·人工智能·chrome·gpt·ai·chatgpt
gqkmiss1 小时前
Chrome 130 版本开发者工具(DevTools)更新内容
前端·chrome·chrome devtools·开发者工具·chrome 130
codeGoogle1 小时前
计算机书籍打包
前端·后端·编程语言
小远yyds1 小时前
跨平台使用高德地图服务
前端·javascript·vue.js·小程序·uni-app
weixin_516875652 小时前
使用 axios 拦截器实现请求和响应的统一处理(附常见面试题)
前端·javascript·vue.js