为什么有时需要使用深度选择器:deep()而有时不需要

前言

查询深度选择器，很多人都会告诉你是用于修改组件库的样式。
然而，有些时候却不需要使用:deep照样能改里面的样式

结论

在组件库中使用插槽自定义的组件，会和自己写的其他组件一样，被赋予data-v-xxx的属性，因此不需要写:deep深度选择器。
如果发现不需要写:deep就能修改组件库的样式，那么有以下的可能：

1. 写在template的组件(代码中能直接看到的)
2. 忘记写scoped了。

细节

1. 一个vue文件会生成一个data-v-xxx的属性值，只有相同属性值的组件之间的样式会相互影响。

因此，一个父组件引用子组件，他的data-v会传递给子组件，因此子组件的样式实际上还是会被父组件影响，只不过子组件之间的样式是隔离的。所以子组件上可能会有两个及以上的data-v-xxx。

2. 组件库的样式之所以需要使用:deep，是因为组件库的代码不出现在你的代码中，在编译调试时不会生成data-v属性，因此相应的样式也就不生效。

:deep的原理，你看一下以下的选择器就明白了。往上找非:deep的选择器，这样可以继续使用属性选择，然后对于deep不使用属性选择器。
因此也不需要考虑样式污染的问题。

.tab-box .display-info[data-v-c28f8e70] .van-cell__title{}