关于css的/deep/,可以解释为啥修改vant的nav-bar组件的title颜色不生效

1./deep/解释为深度选择器

2.在vue中为了不受父类的影响在<style>里会加scope属性，这样可以保证样式应用于子组件范围，规定作用域，这样系统自动给<style>里的类添加hash值索引，例如，我新建一个组件my.vue在底部添加:

<style lang="scss" scoped>
.van-ellipsis{
    color:#ffffff;
}
</style>

这个样式的作用域在my.vue。系统会自动给title类添加索引.title[data-s-113ada2]{}。然后添加vant组件nav-bar，代码如下：

<van-nav-bar color="#ffffff" style="background-color:#3250FA;" title="签字" @click-left="onClickLeft">
<van-icon name="cross" color="#ffffff" size="18" slot="left" />
</van-nav-bar>

<style lang="scss" scoped>
.van-ellipsis{
    color:#ffffff;
}
</style>

此时样式的title并非是van-nav-bar的样式，title的作用域不在子组件van-nav-bar，我们无法达到修改标题颜色的目的。这时我们可以使用/deep/

/deep/ .van-ellipsis {

  color: #ffffff;

  font-size:0.35rem;

}

这样标题颜色就改了，deep帮我们将样式作用域深入到了子组件里。