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

 

 總結：前端基礎雖然差，但是不要怕，一點一滴積累即可