记一个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/