在Vue.js项目中,尤其是在使用组件化开发时,我们时常需要修改组件内部的样式,但Vue的样式封装特性(如<style scoped>)会阻止外部样式直接作用于组件内部。为了应解决这个问题,Vue社区引入了深度选择器(也称为穿透选择器或阴影穿透选择器),让我们能够跨越组件的封装边界,对内部元素进行样式定制。
解决办法一:
由于scoped属性的防渗透作用,添加的样式不会生效,将scoped属性去掉,样式生效了.这种写法是作用到全局的,如果不严格规范class的命名,非常容易污染全局样式。这种写法,等同于写在全局样式文件中。
解决方法二:
保留scoped属性,使用深度选择器
1. /deep/
/deep/
是Vue 2.x中用于穿透组件样式封装的一种方式,兼容性:支持CSS预处理器(如Sass、Less)和CSS原生样式。注意:在Vue 3.x中,/deep/
不再被官方直接支持
2. >>>
CSS原生语法:>>>
是CSS原生中的深度选择器语法,用于穿透样式封装。但在Vue单文件组件(.vue)中,它并不总是被直接支持,因为Vue会将其视为普通CSS选择器的一部分。兼容性:仅在某些特定环境(如Webpack的css-loader配置中)和原生CSS中有效,Vue单文件组件中通常需要特定配置才能使用。注意:在Vue 3.x中,>>>
同样不再被推荐使用
3. ::v-deep
Vue 3.x中的推荐用法:::v-deep
是Vue 3.x中引入的官方深度选择器,用于替代Vue 2.x中的/deep/
和原生CSS中的>>>
。兼容性:支持CSS预处理器和CSS原生样式,是Vue 3.x中推荐使用的深度选择器。
4. :deep
特殊用法:在Vue 3的Composition API中,可以通过v-deep()
函数在<style>
标签中动态应用深度选择器。这不是CSS语法的一部分,而是Vue 3特有的模板编译特性。用法:通常在<style>
标签的scoped
属性下,结合v-bind:class
或v-bind:style
在模板中动态绑定样式时使用。
总结
Vue 2.X
<style scoped>
.parent /deep/ .child {
/* 样式规则 */
}
</style>
或者使用>>>
(需要配置支持):
<style scoped>
.parent >>> .child {
/* 样式规则 */
}
</style>
Vue 3.x
<style scoped>
:deep(.van-card__thumb) {
width: 120px;
display: flex;
justify-content: space-around;
}
</style>
新的vue3.0 单文件规范中,如果你还是使用写法3,会碰到如下警告:
[@vue/compiler-sfc] ::v-deep
usage as a combinator has been deprecated. Use :deep(<inner-selector>)
instead.
写法3在vue3.0中已经被不推荐使用,在开发vue3.0项目的时候,使用写法4