vue修改子组件中的样式

<template>
  <div id="app">
  
    <router-link to="/about">aboutrouter-link>
    <router-link to="/home">homerouter-link>
    <hr>
    

   <router-view>router-view>
  div>
template>

<script>
export default {
  name: 'App',
}
script>


<style lang="less" scoped>
  a{
    text-decoration: none;
    margin: 0 50px;
    font-size: 20px;
}
/deep/ #app .home{
  background-color: red;
}

style>

hone

<template>
    <div id="app">
        <div class="home">
            <h1>homeh1>
        div>
    div>
template>


<script>
export default {

}
script>


<style scoped>
    .home{
        width: 500px;
        height: 300px;
        background-color:pink;
    }
style>

为什么home没有变红，样式没有生效 权重小与home组件中的样式吗？ 原因是啥

• 这篇博客: vue实战项目-电商商城前台-（学习尚硅谷的）尚品汇中的 四、Home首页拆分静态组件完成 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 

  Home/index.vue

  <template>
      <div>
          <TypeNav/>
          <ListContainer/>
          <Recommend/>
          <Rank/>
          <Like/>
          <Floor/> 
          <Floor/> 
          <Brand/> 
      </div>
  </template>
  
  <script>
  import ListContainer from '../Home/ListContainer';
  import Recommend from '../Home/Recommend';
  import Rank from '../Home/Rank';
  import Like from '../Home/Like';
  import Floor from '../Home/Floor';
  import Brand from '../Home/Brand';
  export default {
      name: '',
      components: {
          ListContainer,
          Recommend,
          Rank,
          Like,
          Floor,
          Brand,
      }
  }
  </script>
  
  <style lang="less" scoped>
  
  </style>