uni-app表單多項選擇器需要使用內置組件checkbox，具體使用見官網鏈接，如下：

checkbox - uni-app官網 (dcloud.io)

官方給出h5端的默認樣式是這樣的：

?

現在需要修改樣式為這樣：

?

于是開始修改：

<checkbox-group @change="checkboxChange"><label class="radio"><checkbox :value="item+''" class="checkbox"/><image :src="item.imgUrl" class="friend-avator"></image>view class="friend-name">{{item.name}}</view></label> </checkbox-group> ......<style scoped>.checkbox:active{border: 2rpx solid #24c023 !important;background-color: #24c023 !important;color: #FFFFFF !important;}...... <style>

添加的樣式無法實現最終效果，即使添加了!important修飾依舊無效。

隨后發現既然checkbox是內置組件，那么一定要通過checkbox組件內的類名或id名修改樣式，于是在開發者工具中找到了內置的類名。

但修改后依舊無法實現......

此時要留意的是，當前組件的style標簽是被一個叫scoped的屬性修飾的

<style scoped>...... <style>

需要解決此問題，先要明白組件的style標簽添加scoped屬性后，當前組件的所有子元素標簽都會統一添加一個如data-v-xxxx的自定義屬性，最終瀏覽器會以該屬性為屬性選擇器匹配樣式，在css所有選擇器的最后添加，如下圖，目的是為了防止當前組件和子組件或其它組件存在重復的class名發生沖突，這樣即便你的項目兩個組件使用了相同的類名，但它們分別匹配了兩個組件不同的屬性選擇器，從而類名就不會沖突了。

為了保險起見，這個項目里的style標簽全部用scoped屬性進行了修飾。

所以想在父組件中修改子組件的樣式，直接通過子組件的類名是無效的，要實現樣式穿透，需要使用深度作用選擇器，在子組件中的類名前添加? >>> ，如下：

/* checkbox樣式 */ >>> uni-checkbox .uni-checkbox-input{margin-right: 0;border-radius: 50% ;border: 2rpx solid #828181 ; } /* 取消選中后的樣式 */ >>> uni-checkbox:not([disabled]) .uni-checkbox-input:hover{border: 2rpx solid #828181; } /* 選中時的樣式 */ >>> uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked{border: 2rpx solid #24c023 !important;background-color: #24c023 !important;color: #FFFFFF !important; }

如果不添加深度作用選擇器，開發者工具中根本無法查看到我們對checkbox組件做修改的樣式

添加了深度作用選擇器后，編譯時會在checkbox組件內部類名前添加當前組件的屬性選擇器，由于優先級高，從而覆蓋掉checkbox組件內的默認樣式，如下圖：

樣式生效~~~

總結一下，深度作用選擇器的寫法

原生css 使用? >>>

less 使用? /deep/

sass 使用? :v-deep

實際上不僅是uni-app的checkbox組件，對于所有第三方組件、自定義組件，或是vue開發的pc端網頁應用等，這類問題的解決方法皆亦如此。

---

但是......以為就這么結束了？？？

emmm......當打開小程序開發者工具調試，發現在瀏覽器中生效的樣式根本沒有生效

審核元素發現在小程序開發者工具中，checkbox組件是被黑盒封裝的，根本無法查看組件內部的類名，也就是說無法知曉修改的類名具體情況了。

于是查閱資料發現，小程序平臺checkbox組件實際內部類名和h5端不一致（類名及代碼如下），所以，若要兼容多平臺需要寫兩套不同類名的樣式，同時配合uni-app中的條件注釋實現跨段兼容，通過在代碼外層包裹條件注釋，當ifdef后面的平臺類型是MP-WEIXIN，代表下列代碼只會在微信小程序端生效，其它平臺不會執行：

/* ifdef MP-WEIXIN */ /*checkbox 選項框大小 */ >>> checkbox .wx-checkbox-input {border-radius: 50% !important;/* background-color: #FFFFFF; */border: 2rpx solid #828181 !important; } /*checkbox選中后樣式 */ >>> checkbox .wx-checkbox-input.wx-checkbox-input-checked {border: 2rpx solid #24c023 !important;background-color: #24c023 !important;color: #FFFFFF !important; } /*checkbox選中后圖標樣式 */ >>> checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {color: #FFFFFF !important; } /* endif */

關于條件注釋，如果還不是很明白，可以查看：條件編譯 解決各端差異 - uni-app官網 (dcloud.io)

總結

以上是生活随笔為你收集整理的【uni-app】深度作用选择器解决修改checkbox样式无效问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。