vue项目中scoped例子

//index.vue--style加了scoped
<template>
    <div class="index">
        index
        <span class="index-con">index-content</span>
        <Son/>
    </div>
</template>

//son.vue--style没加scoped
<template >
    <div>
        son 
        <div class="son-con">
            <span>son-content</span> 
        </div> 
    </div>
</template>

• 浏览器展示

• 发现：son组件只有最外层标签有加属性

可能会产生的操作

• 样式不生效

<style lang="less" scoped>
    .index .son-con {
        background-color: aqua;
    }
</style>

• 因为所有的scoped中的css最终编译出来都会变成这样

.index .son-con[data-v-19aa5b30] {
    background-color: aqua;
}

解决less/scss中--使用/deep/

<style lang="less" scoped>
    .index {
        /deep/ .son-con {
            background-color: aqua;
        }
    }
</style>

• 编译为

.index[data-v-19aa5b30] .son-con {
  background-color: aqua;
}

css中使用深度作用选择器 >>>

<style lang="css" scoped>
    /* css */
    .index >>> .son-con{
        background-color: aqua;
    }
</style>