1、存在修改默認樣式不生效問題的展示：

A、問題一：雖然通過深度選擇器修改了下拉框的背景等樣式問題卻沒有展示：

B、問題二：渲染后的 dom 元素并不在 #app 元素內(nèi)部：

// 發(fā)現(xiàn)：修改下拉框默認屬性而渲染的 dom 元素是與 #app 并列位于 body 中的，因此是沒有辦法通過深度選擇器來定位該元素的；

2、用(深度)選擇器設(shè)置屬性不生效的原因：

A、原因一：select-popper 元素渲染后會脫離 #app;

發(fā)現(xiàn)渲染后的 dom 元素不在 #app 元素內(nèi)部, 應(yīng)該是 el-select 里面的 select-popper 元素渲染后會脫離 #app , 所以使用深度選擇器也無法定位該元素;

B、原因二：容器不掛載到 #app 上就無法被成功渲染；

選中 el-select 的選項時頁面的結(jié)構(gòu)時，選項的容器并不在掛載的 div#app 上，所以設(shè)置的樣式就無法正常作用到選項內(nèi)容的 div 上；

3、解決方案：用 :popper-append-to-body="false" 屬性

A、popper-append-to-body屬性的作用：
popper-append-to-body 屬性是 Element-ui 官方文檔中提供的一個屬性，該屬性的用途: 就是將 el-select 選項的內(nèi)容移動 div#app 當中，默認值是 true ;

B、如何使用:popper-append-to-body="false" 屬性：

在 中添加該屬性即可，然后就可以成功修改 Select 組件的默認樣式(即: 可以用深度選擇器修改默認樣式)；

C、修改后的頁面展示效果為：

4、小結(jié)：

其一、哪里有不對或不合適的地方，還請大佬們多多指點和交流！
其二、有興趣的話，可以多多關(guān)注這個專欄(Vue(Vue2+Vue3)面試必備專欄)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482