web建站教程
  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. AIGC工具
  6. 前端知识
  7. 百度echarts
  8. 更多
    php入门
    nodejs
    mockjs
    reactjs
    mysql
    wordpress
    织梦cms
    帝国cms
    git教程
    IT知识
    模板大全
    休息站
    手机应用

vue样式scoped中什么情况下用深度选择器/deep/

718 ℃

vue项目中的style标签上有一个特殊的属性scoped。当启用scoped属性时候,它的css样式只能用于当前的Vue组件,可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性,相当于实现了样式的模块化。

那什么情况下用深度选择器/deep/scoped深度选择器有什么好处?

style设置为scoped的时候,里面在写样式对子组件是不生效的,如果想让某些样式对所以子组件都生效,可以使用/deep/深度选择器。

示列一:

.menu /deep/ .el-title{
  color:red;
}

示列二:

/* 渲染前 */
#app button{
  span{
    /deep/ span{
      color:pink
    }
  }
}
/* 渲染后 */
#app button span[data-v-7ba5bd90] span {
  color: pink;
}

vue中的scoped样式不生效解决方法(样式穿透的方法)

scss中深度选择器/deep/的基本用法

vue项目打包后部分样式不生效怎么办(解决办法)

标签: deep, scoped, 深度选择器

上面是“vue样式scoped中什么情况下用深度选择器/deep/”的全面内容,想了解更多关于 vuejs 内容,请继续关注web建站教程。

当前网址:https://ipkd.cn/webs_4108.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

当前位置: 网站首页 > vuejs
本文共计367个字,预计阅读时长3分钟
生活小工具,收录了80多款小工具
上一篇: 推荐一款完全免费的 Windows 软件卸载、清理工具——HiBit Uninstaller
下一篇: 推荐一款可免费商用圆体字库——江城圆体
x 打工人ai神器