Scoped CSS

Scoped CSS

当 <style scoped >标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素

混用本地和全局样式

你可以在一个组件中同时使用有 scoped 和非 scoped 样式

<style>
/* 全局样式 */
</style>

<style scoped>
/* 本地样式 */
</style>

深选择器

如果想对设置了scoped的子组件里的元素进行控制可以使用’>>>’或者’deep’
一些预处理程序例如sass不能解析>>>属性，这种情况下可以用deep，它是>>>的别名，工作原理相同。

<template> /*父组件*/
  <div id="app">
    <gHeader></gHeader>
  </div>
</template>

<style lang="css" scoped>
  .gHeader /deep/ .name{ //第一种写法
    color:red;
  }
  .gHeader >>> .name{   //二种写法
    color:red;
  }
</style>

<div class="gHeader">/*子组件*/
  <div class="name"></div>
</div>

动态生成的内容

使用v-html动态创建的DOM内容，不受设置scoped的样式影响，但你依然可以使用深选择器进行控制