一个组件需要在很多地方使用,但是其中某个子组件的css需要改变,可以使用deep更改组件中的css,需要加上scoped,来进行隔离,最外层的标签可以直接进行修改。
vue2.0
<style scoped>
.play-list{
/deep/ .section-content{
width: 80%;
margin-left: 160px;
}
height: 100px;
}
</style>
vue3.0
<style scoped>
.play-list{
::v-deep(.section-content){
width: 80%;
margin-left: 160px;
}
height: 100px;
}
</style>
当 style标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素,不会影响到子组件(非根结点)的样式。在编译组件的时候,如果当前组件内style标签上有scoped属性,那么会在当前所有标签上添加一个【data-v-hash】属性,而当前样式表内的所有末尾选择器后面也会加上该属性,那么就使得当前组件内的样式只会作用于当前组件内的元素。