使用 scoped 后，父組件的樣式將不會滲透到子組件中。 例如1（無效）： ~~~ <template> <div id="app"> <el-input class="text-box" v-model="text"></el-input> </div> </template> <script> export default { name: 'App', data() { return { text: 'hello' }; } }; </script> <style lang="less" scoped> .text-box { input { width: 166px; text-align: center; } } </style> ~~~ 解決方法: 使用深度作用選擇器 /deep/ ~~~ <template> <div id="app"> <el-input v-model="text" class="text-box"></el-input> </div> </template> <script> export default { name: 'App', data() { return { text: 'hello' }; } }; </script> <style lang="less" scoped> .text-box { /deep/ input { width: 166px; text-align: center; } } </style> ~~~ 例子二： ~~~ <div v-show="currentTap[currentTap.length -1] == 'key'" class="item_div"> <el-form-item> <el-checkbox-group v-model="checkedKeys" @change="handleCheckedCitiesChange"> <el-checkbox label="添加該擴展域" name="type"></el-checkbox> <el-checkbox label="將該擴展域設置成關鍵的" name="type"></el-checkbox> </el-checkbox-group> </el-form-item> </div> ~~~ 不生效 ~~~ .item_div .el-form-item__content { width: 500px; } ~~~  生效 ~~~ .item_div /deep/ .el-form-item__content { width: 500px; } ~~~