Vue的 css样式写法id + class名

template

<a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider
      :trigger="null"
      collapsible
      v-model="collapsed"
    >
      <div class="logo">
        <div> <img src="@/assets/logo.png" class="img-style"/><h1 class="h1-style" >救灾物资管理</h1></div> 
      </div>
    </a-layout-sider>
    <a-layout>

css样式

#components-layout-demo-custom-trigger .logo {
  position: relative;
  height: 45px;
  background: rgb(12, 12, 12);
  margin: 16px;
  overflow: hidden;
  background: rgb(12, 12, 12);
}

#components-layout-demo-custom-trigger .img-style{
margin-left: 10px;
height:30px;
display: inline-block;
color: #ffffff;
}


#components-layout-demo-custom-trigger .h1-style{
margin-left: 10px;
font-size:18px;
margin-top:10px;
display: inline-block;
color: #ffffff;
vertical-align: middle;
}