前端 /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可以不写

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