问题：单独改变button的hover样式，只会作用于子元素上？

很奇怪的一点是，写的hover样式只会作用在选择器的子元素上，为什么呢？

代码：

<el-col :span="2" style="text-align:right" id="btnWraper">
  <el-button @click="clickExport" v-if="priviscode.queryBtn" class="downloadBtn">
   <i class="el-icon-download" style="font-weight:1000;padding-right:10px">
   </i> 导出
  </el-button>
</el-col>

css:

.downloadBtn{
  background:#23272b;
  color:#fff;
  border:1px solid #23272b;
  padding:12px 15px 12px 10px;
}

#btnWraper :hover{
  background: #343a40;
}

只有写在button的父元素btnWraper上，hover botton的bgc才会变，如果写在btn上，变颜色的只有btn内部的span