这是一个创建于 2072 天前的主题，其中的信息可能已经有所发展或是发生改变。
首先我用了 vant 这个框架
在 A 页面里有很多图片，图片显示用的是 vant 里的图片组件（ van-image ），现在需要给图片加上圆角，于是我就用了全局的 css （ scoped 不生效）
<style> .van-image__img { border-radius: 5px; } </style> 从 A 页面跳转到 B 页面后，B 页面也有很多图片，同样也是用的 van-image 显示的，现在需求是 B 页面图片不能有圆角，于是我又在 B 页面里把圆角去掉：
<style> .van-image__img { border-radius: 0; } </style> 现在的问题是当从 B 页面返回到 A 页面的时候，A 页面的图片圆角也没了。各位大佬应该如何解决呢？
现在临时解决方案是 A\B 两页面一个页面用原始的 img 一个页面用 van-image
第 1 条附言 2020-04-16 10:23:47 +08:00
感谢各位 /deep/ 解决了
我一后端，之前没听说过还有 /deep/ 这个东西…… 学到了~
我一后端，之前没听说过还有 /deep/ 这个东西…… 学到了~
 | 1 ayase252 2020-04-15 17:45:31 +08:00 via iPhone  1 ......二次封装一下组件 |
 | 2 vex2 2020-04-15 17:47:00 +08:00 1 写两个全局 class 加到 component 不同页面的指令里 |
 | 3 cyrbuzz 2020-04-15 17:47:04 +08:00 1 仅仅解决了这个问题的方法... 给 B 里的加 scoped... ``` <style scoped> .van-image__img { border-radius: 0; } </style> ``` |
 | 5 just1 2020-04-15 17:47:29 +08:00 via Android 1 多几层选择器咯，比如弄一个 b 独有的父 class |
 | 6 ochatokori 2020-04-15 17:48:32 +08:00 via Android 1 给 a 页面加个类名呗… |
 | 8 imherer OP @ochatokori @vex2 我最开始就想这样解决，但是它这个 van-image 组件解析之后是一个 div 里面套了一个 img，加了 clas 是直接加到了 div 上，是过用 css 选择器给子元素添加 css 也不生效 |
 | 9 karott7 2020-04-15 18:47:56 +08:00 1 出现层主这样的问题是访问 A 页面就会加载 A 页面的 css 文件，再访问 B 页面就会加载 B 页面的 css 文件，有相同的属性就会覆盖掉。 加 scoped 是一个办法，但是如果在顶层定义了一个类，那么就不能用。 我是在每个页面的根元素加一个类，比如.a-wrapper 和.b-wrapper，然后 a 文件下的 css 类都写在对应的 wrapper 下面，这样就不会出现层主那样的问题了 |
 | 10 Mozshaw 2020-04-15 18:51:08 +08:00 1 /deep/ selector |
 | 11 zhuweiyou 2020-04-15 18:52:05 +08:00 1 全局的 CSS 文件里写个 body.hello .van-image__img { border-radius: 5px; } 然后在 路由变化的钩子里 判断 是 A 页面 body.addClass("hello"),其他页面 body.removeClass("hello") |
 | 12 jingcoco 2020-04-15 19:01:50 +08:00 via Android 2 /deep/ 了解一下。我之前遇到过类似的 ，scoped 导致无法穿透的，可以用这个做前缀 |
 | 13 yeyeboy 2020-04-15 19:15:56 +08:00 1 scoped 穿透里面的组件，我一般是在图片外面加一层容器，然后像下面这样 .van ::v-deep .van-image__img { border-radius: 0; } = ，= 你要是没别的办法可以试试这个（不保证能用哈） |
 | 14 choujiaojiao 2020-04-15 19:17:32 +08:00 1 /deep/ |
 | 15 xuxuxu123 2020-04-15 19:18:49 +08:00 1 /deep/ 是对的 目前在用 |
 | 16 Parabolazz 2020-04-15 19:44:29 +08:00 1 /deep/ 可以在 scoped 下影响到内部的选择器 |
 | 17 zhw2590582 2020-04-15 19:58:36 +08:00 via iPhone 1 给不同页面分配不同的类名就可以区分开啦 |
 | 18 Elephant696 2020-04-23 11:16:34 +08:00 css 环境可以用 >>> 穿透符，less 环境可以用 /deep/ 穿透符，dart-sass 环境可以用 ::v-deep 穿透符，node-sass 环境忘了，好像也是 /deep/ 穿透符 |
Select Language