1. 若是没有使用像less, sass等这样的css预处理器, 那么是只能使用 >>>这样的css深度选择器 .box >>> el.dialog { } AI代码助手复制代码 2. 若是使用了css预处理器,则可以使用/deep/, 如果/deep/ 无效,则使用 ::v-deep .box /deep/ el.dialog { } AI代码助手复制代码 或 .box::v-deep el.d...
删去了,果然不报错。 可是问题就出在这个根节点上,如果App.vue中没有这个根节点,那么:deep()不起作用,我把根节点加上,:deep()样式就生效了。 唉,感觉自己被这个根节点坑了一把。 1.父组件App.vue中代码 :deep(.title3){background-color:antiquewhite; } AI代码助手复制代码 2.子组件中的代码 <template>...
在89 版本以前的 chrome,可以识别 xxx /deep/ ooo,并解析为后代选择器(空格)。但 89 版本之后就完全不能解析这个选择器了,也就呈现出完全无效的情况。 总结 Vue SFC 中/deep/没有问题,放心使用。反之,单独的 less/sass/css 文件坚决不要用; Vue2 项目尽早转向 Vue3 项目,和历史包袱说再见。
2、sass和less的样式穿透 使用:(/deep/)不生效可使用::v-deep 外层类 /deep/ 想要修改的类名 { 要修改的样式 } 例:.wrapper /deep/ .el-card__header { border-bottom: none } 3、通用样式穿透 使用:(::v-deep)(推荐使用此种方式) ::v-deep 想要修改的类名 { 要修改的样式 } 例:::v-deep ...
写法有:::v-deep,>>>,:deep(),/deep/ 具体区分: 如果你使用的是css,没有使用css预处理器,则可以使用>>>,/deep/,::v-deep。 如果你使用的是less或者node-sass,那么可以使用/deep/,::v-deep都可以生效。 如果你使用的是dart-sass,那么就不能使用/deep/,而是使用::v-deep才会生效。
可是问题就出在这个根节点上,如果App.vue中没有这个根节点,那么:deep()不起作用,我把根节点加上,:deep()样式就生效了。 唉,感觉自己被这个根节点坑了一把。 1.父组件App.vue中代码 :deep(.title3){background-color:antiquewhite;} 2.子组件中的代码 <template>受父组件...
预处理器 scss 、sass、less 操作符 >>> 可能会因为无法编译而报错 。可以使用 /deep/注意:vue-cli3以上版本无法使用 >>> 或/deep/ 如果使用了预处理器都可以使用 ::v-deep https://vue-loader.vuejs.org/... 有用 回复 查看全部 3 个回答
怎么用的呢 ?就是在我们想穿透的选择器前边添加 >>> 或者 /deep/ 或者 ::v-deep。 官方还说>>>可能存在问题Vue 2.x无效,建议用后两者,就选择 /deep/ 。 实现原理: 没加穿透前 .wrap .example { color: red; }.wrap .example[data-v-469af010] { color: red; } 加了穿透后: .wrap...
只为根元素添加了data-v-xxx属性，子元素不会添加，这影响了穿透规则的适用性。样式穿透的多种写法总结：包括::v-deep、>>>、:deep()、/deep/等方法。使用取决于所使用的CSS预处理器（例如less或node-sass）以及所使用的Vue版本。在Vue2.7以上版本及Vue3中，::v-deep亦可有效应用。
1、sass和less的样式穿透 使用/deep/ 外层 /deep/ 第三方组件 做到三点:a. 当前的vue文件要加上lang和scoped属性 b...