前端 /deep/ 深入样式(很深入的那种哦) 简单收藏

简单介绍：使用vue脚手架和elemen-ui开发的前端项目  遇到这样的场景： 对div下的el-select下拉组件 设置样式，直接在标签上用style属性是完全可以的，但我们的开发规范是前端样式必须扔到<style>中，因此会遇到 使用el-select按钮组件的时候 页面被渲染出来会有好几层 ，怎么正好把样式加到对应那个下拉那个input元素上呢？

<div class="table-structure-select">
  <el-select v-model="dataSelect" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></el-option>
  </el-select>
</div>

el-select组件被渲染后的html  会多出来几层  如下： 

 

 所以我们如果要对select设置样式 必须要深入到 class="el-input el-input--suffix" 甚至是 class="el-input__inner" 中

.table-structure-select /deep/ .el-select .el-input {
  width: 435px;
}

如此才能设置上需要的样式  其实可以只写最外层的父元素class 然后 /deep/  需要调整的内层元素class就行 即.table-structure-select /deep/ .el-input {   }中间的.el-select可以不写

 

 总结：前端基础虽然差，但是不要怕，一点一滴积累即可