凡科做网站有什么用,室内设计学校在哪里,用哪个网站做相册视频文件,促进房地产市场健康发展作用及概念 当 style 标签有 scoped 属性时#xff0c;它的 CSS 只作用于当前组件中的元素#xff0c;父组件的样式将不会渗透到子组件。在vue中是这样描述的#xff1a; 处于 scoped 样式中的选择器如果想要做更“深度”的选择#xff0c;也即#xff1a;影响到子…作用及概念 当 style 标签有 scoped 属性时它的 CSS 只作用于当前组件中的元素父组件的样式将不会渗透到子组件。在vue中是这样描述的 处于 scoped 样式中的选择器如果想要做更“深度”的选择也即影响到子组件可以使用 :deep() 这个伪类
举个简单的栗子假设这里有一个element的组件我们需要改动它的外边距 el-selectv-modelidplaceholder选择登录sizelargestylewidth: 240pxel-optionv-foritem in users:keyitem.id:labelitem.name:valueitem.id//el-select 我们可用使用浏览器的f12工具查看元素 可以使用它的类名但是这样是不行的因为我们加上了 scope为了让样式不会污染到其他的组件。
style langscss scoped.el-select__wrapper {margin-top: 10%;}
}
解决方案
通常会有两种处理方法 将scoped属性去掉。样式生效了但是这种写法是作用到全局的非常容易污染全局样式。这种写法其实等同于写在全局样式文件中。 保留scoped属性使用深度选择器代码如下
我们有4种写法
1、::v-deep
!-- 写法1 使用::v-deep --
style langscss scoped::v-deep .el-select__wrapper {margin-top: 10%;}
} 这种写法在vue3已经弃用用这种写法的话会给出如下警告 [vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(inner-selector) instead. 2、 操作符
!-- 写法2 使用 操作符--
style langscss scoped
.el-select__wrapper {margin-top: 10%;
}
style 这种写法在浏览器兼容性问题所以一般也不推荐使用
3、/deep/
!-- 写法3 使用/deep/ --
style langscss scoped/deep/.el-select__wrapper {margin-top: 10%;
}
style 这种写法不支持sass预处理器也不推荐使用
4、:deep(inner-selector)
style langscss scoped:deep(.el-select__wrapper) {margin-top: 10%;}
/style
总结 当我们遇到需要在一个组件中想要影响到子组件就可以使用深度选择器而::v-deep 在vue3中已经启用了 /deep/ 和 有存预处理器不支持和浏览器兼容为题综上所述使用:deep(inner-selector)是最佳的解决方案。
