记一个vue在scoped样式中选择器涉及到子组件时样式不生效问题

1.简介

 

vue在scoped样式中书写css，选择器选择了子组件中的class，此时样式不生效

<template>
    <div class="layui-layout layui-layout-admin" :class="{'hide-menu':collapse}" id="app">
        <!--全局顶部-->
        <global-header></global-header>
		<!-- 侧边栏菜单 -->
		<global-side-bar></global-side-bar>
		<!-- 主要内容 -->
		<global-main></global-main>
        <global-layer></global-layer>
    </div>    
</template>

<style scoped>
    /** 隐藏菜单样式 */
    .hide-menu.layui-layout-admin .layui-side{ 
        left:-200px; 
    }
    .hide-menu .layui-body,
    .hide-menu .layui-footer{ 
        left:0; 
    }
</style>

此处的选择器选择的下级元素class都是在各个子组件中，由于scoped特性，父子组件的data-v-xxxx是不相同的，所以此处选择器不会生效

 

2.解决

 

vue提供的解决方式

<style scoped>
    /** 隐藏菜单样式 */
    .hide-menu.layui-layout-admin /deep/ .layui-side{ 
        left:-200px; 
    }
    .hide-menu /deep/ .layui-body,
    .hide-menu /deep/ .layui-footer{ 
        left:0; 
    }
</style>

父子组件选择器之间添加/deep/即可，此处代表选择器可以延伸到深处

也可以使用>>>代替/deep/