Vue style 深度作用选择器 >>> 与 /deep/(sass/less)
Vue 作用 深度 gt 选择器 Deep Style Less
2023-09-11 14:16:38 时间
传送门:https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html
后记
/deep/ 改为 ::v-deep
你很可能会遇到的问题
vue组件编译后,会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局,但如果你引用了第三方组件:
默认只会对组件的最外层(div)加入这个 [data-v-xxxx] 属性,但第二层开始就没有效果了。如图所示: 第一层还有 data-v-17bb9a05, 但第二层的 .weui-cells 就没有了。
(这是 <group />组件的源码: https://github.com/airyland/vux/blob/v2/src/components/group/index.vue )
所以,如果你期待通过如下方式修改 weui-cells 的样式。是没有任何效果的:
<style scoped> .fuck .weui-cells { // ... } </style>
这是因为,所有的scoped中的css最终编译出来都会变成这样:
.fuck[data-v-17bb9a05] .weui-cells[data-v-17bb9a05]
解决方法一:除非你将 scoped 移除,或者新建一个没有 scoped 的 style(一个.vue文件允许多个style)
<style scoped> .fuck { // ... } </style> <style> .fuck .weui-cells { // ... } </style>
解决方法二:深度作用选择器 >>>
(注意,只作用于css)
.fuck >>> .weui-cells { // ... }
但如果是sass/less的话可能无法识别,这时候需要使用 /deep/ 选择器。
<style lang="scss" scoped> .select { width: 100px; /deep/ .el-input__inner { border: 0; color: #000; } } </style>
相关文章
- Vue笔记:vue-router
- Vue笔记:安装配置node.js及使用vue-cli创建项目
- Vue2的右键弹出菜单(vue-contextmenu)
- vue-cli3的eslint配置问题
- [Vue] Get up and running with vue-router
- vue.js3:图片镜像(翻转)并保存(vue@3.2.37)
- 高性能流媒体服务器EasyDSS前端重构(一)-从零开始搭建 webpack + vue + AdminLTE 多页面脚手架
- [Vue @Component] Write Vue Functional Components Inline
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- vue npm run serve/dev命令后台运行:nohup npm run serve >web.log 2>&1 & exit
- 一个典型的Vue应用的App.vue
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- vue:export default 和 export 区别(difference between Vue 'export default' and 'new Vue')
- nginx 、vue - nginx同一个端口配置多个vue工程 和 vue 配套打包具体配置 教程
- Vue中父组件与子组件之间的通信
- Vue实战狗尾草博客后台管理系统第三章
- Vue中vue-i18n结合vant-ui实现国际化
- Vue中vue-i18n结合element-ui实现国际化
- 128:vue+openlayers 绘制矩形,drawend取消绘制锚点,屏蔽双击放大事件 (示例代码)
- 126:vue+openlayers 加载谷歌地图(另一种URL方式)
- Vue(一)vue 概述与用法、MVVM、绑定语法、vue 指令
- 解析Vue项目每一个文件夹及文件的作用
- vue项目配置打包测试环境/生产环境