建设工程招标专业网站,网站联盟广告,可以接单做网站的软件,网站开发与解决技巧目录 背景
使用#xff1a;
1、当项目中使用的 css 原生样式 #xff0c;需要使用 深度选择器来修改 外用第三方组件的样式
2、当项目中使用的 css 扩展语言是 less#xff0c; 需要使用 /deep/ 或者 ::v-deep 深度选择器来修改 外用第三方组件的样式
3、…目录 背景
使用
1、当项目中使用的 css 原生样式 需要使用 深度选择器来修改 外用第三方组件的样式
2、当项目中使用的 css 扩展语言是 less 需要使用 /deep/ 或者 ::v-deep 深度选择器来修改 外用第三方组件的样式
3、当项目中使用的 css 扩展语言是 node-sass 需要使用 /deep/ 或者 ::v-deep 深度选择器来修改 外用第三方组件的样式 4、当项目中使用的 css 扩展语言是 dart-sass 需要使用 ::v-deep 深度选择器来修改 外用第三方组件的样式dart-sass不支持 /deep/ 和 的写法
注意 背景 在 vue 项目的开发过程使用了 ElementUI 组件且样式 style 使用了 scoped 属性当想要修改组件样式发现直接修改不了需去掉 scoped 属性或者使用深度选择器才能修改成功。去掉scoped的话又会影响全局样式针对这种情况可以使用深度作用选择器即样式穿透 ::v-deep的使用_前端_前端烂笔头-华为云开发者联盟
使用
1、当项目中使用的 css 原生样式 需要使用 深度选择器来修改 外用第三方组件的样式
style langcss scoped.el-button span{color: #f00}
/style
2、当项目中使用的 css 扩展语言是 less 需要使用 /deep/ 或者 ::v-deep 深度选择器来修改 外用第三方组件的样式
style langless scoped/deep/.el-button{span{color: #f00}}.el-button::v-deep{span{color: #f00}}
/style
3、当项目中使用的 css 扩展语言是 node-sass 需要使用 /deep/ 或者 ::v-deep 深度选择器来修改 外用第三方组件的样式
style langscss scoped.el-button::v-deep{span{color: #f00}}/deep/.el-button{span{color: #f00}}
/style 4、当项目中使用的 css 扩展语言是 dart-sass 需要使用 ::v-deep 深度选择器来修改 外用第三方组件的样式dart-sass不支持 /deep/ 和 的写法
style langscss scoped.el-button::v-deep{span{color: #f00}}
/style注意 ① 操作符 可能会因为无法编译而报错可以使用 /deep/ ② vue3.0 中使用 /deep/ 会报错更推荐使用 ::v-deep ③ 对于使用了 css 预处理器scss 、sass、 less时深度选择器 ::v-deep 比较通用
