Less嵌套img标签，样式不生效的问题

2022/02/19
- 编程
0阅读

通过直接多层嵌套的scss无法设定child元素中的img的尺寸

<script lang="scss" scope>
.parent {
    .child {
        img {
            display: block;
            width: 100%;
        }
    }
}
</script>

想着在css中可以使用>>>来深度查找元素，于是改成这样：

<script lang="scss" scope>
.parent {
    .child {
        >>> img {
            display: block;
            width: 100%;
        }
    }
}
</script>

结果发现>>>直接导致scss编译报错，上网搜了一下在scss中可以使用/deep/来深度搜索元素，改成这样就能正常使用了。

<script lang="scss" scope>
.parent {
    .child {
        /deep/ img {
            display: block;
            width: 100%;
        }
    }
}
</script>

注：在vue-cli3编译时，如果因为/deep/出现编译报错，可以把/deep/替换成::v-deep来解决

<script lang="scss" scope>
.parent {
 .child {
     ::v-deep img {
         display: block;
         width: 100%;
     }
 }
}
</script>

Less嵌套img标签，样式不生效的问题

作者：有点东西

链接： https://www.youdiandongxi.com/article/less-deep-selector.html

协议：本文采用 CC BY-NC-SA 4.0 隐私协议，转载请注明出处！

Less嵌套img标签，样式不生效的问题

Less嵌套img标签，样式不生效的问题

其他推荐内容

vue入门笔记

IE浏览器访问网站提示升级

PHP 图片的冗余处理

评论区