css 中的 deep深度 作用选择器

css

deep作用选择器原理及作用

• 在vue文件的style中加入scoped 属性 那么父组件的样式不会渗透到子组件中

  • 

  • 加入之后 会给该根组件一个属性 hash

  • 

  • 第一个data....是该组件的hash值 第二个 data...是父组件的hash值

• 那么我们在父组件中写入样式是什么样的

  • <style scoped>
        .header .title {
          color: red;
        }
    </style>

  • .header .title[父组件的hash] {color: red;}

  • 这样子父组件样式就渗透不到子组件中了

• 如果非要个别父组件渗透到子组件中

  • .header >>> .titile {
          color: red;
        }

  • .header[父组件的hash] .title {color: red;}

• 在less 、sass中无法解析 >>> 那么就使用less

  • .header {
        &:deep(.title) {
            color: red;
        }
    }