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

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

巴特西

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

最新文章

热门文章