vue scoped css

1、有时候呢，我们在写一个组件的时候，咱们很有可能需要让它这个样式呢，仅仅作用于当前组件，那么这个时候我们应该怎么办呢？

2、答案是大家在这个stylle的标签里加上一个scoped这样一个特性。我们就可以实现了

3、在这个组件的上面，预先添加了一个scoped,上面加了一句话，它说如果添加了scoped，这个特性，我们将限制css为组件only，那将会只作用于当前的这个组件

4、大家来看下当前这个页面，我们着重观察的是这个helloworld这个组件，注意观察，大家看，那么所有这个样式的话，最终有一个特点，就是你会发现，所有的元素上面多上一个这样的特性，data-v-469af010,这些家伙它们的样式呢，我们尤其要观察这些a标签，你看这些样式最终会结合着刚才添加在这些元素上的这些特性，然后修改了我们自己编写的样式

5、这就是它底层的原理。这边呢，也给大家去说了，底层原理是干什么的。第一步，我们在上面模板里面对标签，就是那些应用了我们编写的这些class的元素，加上了一些自定义的属性

6、这些自定义属性会和我们的postcss，最终会修改生成的那个样式整好能够对上，

7、能不能还在当前的这个作用域里面再写上一些全局的样式，而不是仅仅作用于当前组件的，我们不妨去做个实验

8、在一个全局样式设置后，也可以再设置一套样式，加上scoped.这个样式的话，它是用什么样的方式作用的额，它是用这种方式作用的。它最后生成的在什么地方？在我们的style里面，它是单独生成的。

9、然后再看下那个全局的，和它完全不再一个style里面去存放，你看这个style标签，它是不是单独去组织我们之前编写的。也就是说它是独立的去处理这些东西。那么大家可以放心大胆的去混用

10、那么这样的话，更深层次的意义是什么呢？如果大家仔细观察，在这个界面种，你会发现，就是最终生成的这个元素的话，你看我这个标签，再加上里面的hello world，的那个根元素，这是那个hello world根元素，因为它上面有一个class=hello，大家会发现，现在这个特性就是90结尾的这个是不是在这个标签上也加了一层，也就是说呢，我会在当前这个父组件里面一些子组件的根元素上也去追加这个东西，这给我一个机会。我如果想要对它再做一些布局呀，样式呀之类的控制，我找到它，你看这里是不是有一个hello这个class，我们看一看在父组件里面，有没有可能对hello里面这个部分做一些稍微的控制，我们的写法是这样的

11、hello{border:1px solid #ccc}是不是就生效了，大家看一看对这个hello生效的边框的影响的方式，注意是.hello[data-v-7sdfds]用的是90这个选择器，主要原因在于我们刚才这个特性标签，它的添加，如果没有它，我们也成功不了，给我们一个答案说，如果你想在父级去控制子集的一个scoped这样的一个样式，你必须怎么做，你必须是也要在父级里加上scoped

12、然后呢，你可以通过这样一个关系对它进行一些样式的控制。但是是不是仅限于咱们这个根元素呀，那么你想穿透向这个根元素的内部再去找其它的元素，你可能就做不到了

13、比如说我在这想穿透进去，直接控制里面的p标签，现在觉得它的这个颜色不好，我想改一下，.world p{boreder:red}你会发现，没有办法做到

14、也就是说如果大家尝试着去穿透的话，你去用刚才的方式是不行的，给大家介绍这种方式，只能用于控制咱们的根元素，当然呢，如果我们这个根元素的样式呢，它可以继承下去，实际上呢，又没有被下面的子元素覆盖，其实它还可以作用，比如说我在当前里面改下字号，颜色，那么如果我的孩子元素没有去设置，我当然能够对它进行影响

15、那么接下来的话，我们还是想更加细节的去讨论就是关于深度选择器的这么一个东西，这个主要的目的是什么呢，就是要解决我们刚才遇到的这个问题。如果我想穿透进去

16、在父级控制子集，子元素，或者是子组件里面的这些样式，那我应该怎么做呢，大家可以用这个三个箭头的这个叫深度选择器，来做，但是请大家注意，你必须写在这个scoped

17、如果不加这个scoped，那是不起作用的，我现在想给app里面的，比如说我们刚才说的p标签去加上一些设定，那么我们应该怎么做呢，我们来看一下，深度选择器

18、#app >>>p{}，也就是说我们成功的穿透进去了，并且改了它，同学们可能会提出一些质疑，就是我们为什么要在父元素上去改，实际上如果这个自定义组件是你自己的，你绝对是没有这个必要的，比如说，我现在要改这个helloworld，我在这改不是更好么。确实是这样，但是大家想一下，如果大家用的是一个第三方的库，别人写的，这个时候，你是不是不太方便直接去修改人家的源码呀，那么我们能不能穿透进去去改呢。我呢给大家说的这种方式就是一个解决方案，那么这个解决方案有一些特别的点，大家需要注意，如果你使用的像是scss,之类的这样预处理器，它无法解析这个>>>,大家需要使用这个/deep/或者:v-deep这样的方式来做设置。

19、这个hello是10，并不是它老爹的90，也就是说最终还是借助老爹的这个东西然后深度的方式选择进去了。这是它从原理上的一种解决方案

总结：

　　1、scoped原理，在模板标签上加上data-v-f0of10自定义属性，然后在组件中，利用PostCss根据元素和自定义属性联合写属性选择器定义样式

　　2、一个组件可以写两套样式，一个全局（sytle标签内存放），一个局部（生成行内样式）

　　3、父组件如果加上scoped与子组件样式的关系

　　　　1、父组件标签自定义属性仅仅会加在子组件根元素上面

　　　　2、如果父组件想穿透子组件根元素，控制里面的标签，就要用到穿透技术。意义在于在外部修改第三方ui库

　　　　3、#add::v-deep .hello p{}。不支持，可以写成/deep/  

　　　　4、

　　　　　　　　#app  {

 　　　　　　　　　　 　　　　 /deep/ .hello .p1 { 

   　　　　　　　　　　  　　　　　　color:red

  　　　　　　　　　　　　　　　　 }

　　　　　　　　　　　}