揭开困扰我多日的scoped和深度选择的真面目！

对于scoped和深度选择器，想必大家已经有一个基本的认知了，无非就是一个防止渗透，一个强行渗透，但在某些乱七八糟的情况下，例如多层组件嵌套，带有后代选择器的渗透。这时候我们难免会犯一些迷糊，绕来绕去，不明怪象所以。

所以，此文将扒开这两个东西的原理。

首先，先来说几个概念，当我们给一个组件的style标签加上scoped属性后，该组件内的所有显式DOM和样式选择器都会被打上一个该组件专属的形似 “[data-v-800f5ac4]” 的烙印。

打上烙印又怎么样呢，对DOM来说，无甚影响，不过好看或难看一点罢了，但对于css选择器来说，你一旦打上烙印，在选择的时候，就必须指定要那头身上有烙印的“猪”，没有我就不干，就不生效，即便你们也只是差了一个烙印而已。

DOM的烙印是什么样，自不必多说，如下图：

重头戏在样式的烙印，有两种情况，

第一种：单选择器，直接打在选择器之后

<style scoped>
.avatar-uploader{
  font-size: large;
}
</style>

第二种：多后代选择器，你可以把它们理解成一家子，拖家带口的，就打在他们的小儿子（最后的选择器）上

<style scoped>
.avatar-uploader .avatar-uploader-icon .inner {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>

深度选择器原理

清楚了烙印长什么样，打在什么地方，下面就该请出我们的重磅选手“深度选择器”了。 由于这位选手酷爱川剧变脸，我们就以 “::v-deep” 来说吧，其他形式就照猫画虎。 它的作用，就不说了，看完原理自会明白，开门见山

::v-deep的原理，就是把烙印前置，对，就是不讲武德，硬把后一个人的烙印烙在前一个人身上，来看效果

<style scoped>
.avatar-uploader .avatar-uploader-icon ::v-deep .inner {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>

简单说，就是，你对谁深度选择，他就把锅（烙印）甩（烙）给前一个人，如果前面没人怎么办，那就甩给它前面的空气，

<style scoped>
::v-deep .avatar-uploader .avatar-uploader-icon .inner {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>

看到这里，相信大家对原理都清楚了，但是怎么用呢， 就拿上面最近的这个样式例子来说吧，这样的选择器是怎么选择的呢，带有烙印的任意元素下的类名1下的类名2下的类名3，那么以此类推上一个样式例子的选择过程就是，类名1下的带有烙印的类名2下的类名3。就是这样顺次找，但凡有一个找不到，您的样式就白写了。为什么呢，您说您雇主是谁都不跟我说清楚，就让我干活，我这这这找谁说理去，

由此衍生出的各种应用场景以及出现的怪象，我就不一一列举了，明白了这个原理，剩下就是万变不离其宗了。

大家如果还有具体疑问，欢迎评论区讨论和指正，第一次写博客，多有不当之处，还望您各位海涵！