css中/deep/的使用

vue中组件的样式是有作用域的，默认是全局样式。

如果不希望当前组件中的样式影响到别的组件，可以添加作用域。通过给style添加scoped,使它的css只作用于当前组件的元素。

<style scoped>
</style>

在有作用域的组件中如何给子组件设置样式？

默认只能作用到子组件的根节点（组件的class 默认作用到组件的根节点）

使用子组件的根节点本身的class类名

如果是第三方组件，不知道它的根节点的类名，那就审查元素查看，或者添加一个类名

// APP.vue

<style scoped> //在根组件中设置HelloWorld 组件的样式，给根节点加了个边框，生效。
.hello {
  border: 1px solid #000;
}
</style>

但是

​ // APP.vue

<style scoped> //在根组件中设置HelloWorld 组件的样式，给根节点加了个边框，生效。
.hello {
  border: 1px solid #000;
}
//在其中再设置HelloWorld 组件中h1的样式，没效果。
h1 {
  color: red;
}
</style>​

此时

//APP.vue
<style scoped> //在根组件中设置HelloWorld 组件的样式，给根节点加了个边框，生效。
.hello {
  border: 1px solid #000;
}
//深度作用操作符（/deep/）,可以使样式作用的更深
/deep/ h1 {
  color: red;
}
</style>​