vue2中使用深度修改样式deep

html-css014

vue2中使用深度修改样式deep,第1张

之前在vue3中的scss里使用deep,直接 deep(.classname)就可以了

可是在vue2中,这样使用根本没识别,经过测试发现,最终使用方法如下:

参考地址: vue2里面使用deep的参考文章

给vue项目中v-html的内容添加样式

1.使用css 深度选择器

<style scoped>

    .content >>>img { max-width: 100%}

</style>

2.使用less深度选择器

<style lang="less" scoped>

    @import '~@/assets/css/base.less'

    .content {

           /deep/ img {

                width:1rem

           }

    } 

</style>

在vue 2.x中,使用scss时,深度选择器是 ::v-deep ,

在vue3.0中,由于 ::v-deep 已被弃用,采用一种新的语法。如果在vue3.0中使用 ::v-deep ,没有任何效果,也不会报错,就是在编译的时候会有一个警告。提示 ::v-deep 已被弃用,请使用 :deep(Selector) 代替。

这样写的话警告就没有了。同时样式生效。