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

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

4128 ℃
           

在vue项目开发中有可能会碰到写在scss中样式不会执行,这是我们会用到深度选择器/deep/,下面web建站小编给大家详细介绍一下具体实现代码!

deep正确写法:

/deep/的用法:

<style scoped>
.menu{
  /deep/ .li { 
    //....
  }
} 
</style>

::v-deep的用法:

<style scoped>
.menu{
  ::v-deep .li { 
    //....
  }
} 
</style>

PS:如果/deep/在vue-cli3编译时,出现报错或者警告可以使用::v-deep

:deep()的用法:

<style>
.menu{
  :deep(.li){
    //....
  }
}
  
</style>

PS: :deep在vue3中项目中使用~

/deep/深度选择器错误写法:

<style scoped>
/deep/ .el-menu .el-menu-item {
  background-color: #000!important;
}
</style>

PS:>>>是深度选择器,可以作用到子组件中的样式,/deep/::v-deep都是>>>的别名,在scss中不识别/deep/,因此报错*/

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

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

vue中使用lang=“scss“后运行报错怎么解决

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

vuejs安装scss脚手架后使用lang=“scss“出现的报错解决方法

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

上面是“scss中深度选择器/deep/的基本用法”的全面内容,想了解更多关于 vuejs 内容,请继续关注web建站教程。

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

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

当前位置: 网站首页 > vuejs
本文共计482个字,预计阅读时长4分钟
生活小工具,收录了80多款小工具
上一篇: 推荐一款可免费商用圆体字库——江城圆体
下一篇: 推荐一款由字制区设计团队的免费综艺字体——字制区喜脉体
x 打工人ai神器