解決vue單頁面修改樣式無法覆蓋問題
當(dāng) <style> 標(biāo)簽有 scoped 屬性時，它的 CSS 只作用于當(dāng)前組件中的元素。
vue組件編譯后，會將 template 中的每個元素加入 [data-v-xxxx] 屬性來確保 style scoped 僅本組件的元素而不會污染全局。
比如：
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>
轉(zhuǎn)換結(jié)果：
<style>
.example[data-v-f3f3eg9] {
color: red;
}
</style>
<template>
<div class="example" data-v-f3f3eg9>hi</div>
</template>
如果你想修改class="example"里面的span樣式，你會發(fā)現(xiàn)是沒有效果的
有兩個解決辦法
方法一
你可以在一個組件中同時使用有作用域和無作用域的樣式：
<style scoped>
.example{
// ...
}
</style>
<style>
.example span {
// ...
}
</style>
方法二
深度作用選擇器
如果你希望 scoped 樣式中的一個選擇器能夠作用得“更深”，例如影響子組件，你可以使用 >>> 操作符：
只作用于css?。。。。。。。。。。。。?！
<style scoped>
.a >>> .b { /* ... */ }
</style>
上述代碼將會編譯成：
.a[data-v-f3f3eg9] .b { /* ... */ }
如果是sass/less的話可能無法識別，這時候需要使用 /deep/ 選擇器了。
<style lang="less" scoped>
/deep/ .b {
color: #000;
}
}
</style>
總結(jié)
以上所述是小編給大家介紹的解決vue單頁面修改樣式無法覆蓋問題,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
這篇文章主要為大家介紹了Vue.js組件，組件是Vue.js最強(qiáng)大的功能之一，感興趣的小伙伴們可以參考一下2016-09-09
如何為vuex實(shí)現(xiàn)帶參數(shù)的 getter和state.commit
這篇文章主要介紹了如何為vuex實(shí)現(xiàn)帶參數(shù)的getter和state.commit，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
Vue.js使用this.$confirm換行顯示提示信息實(shí)例
在編寫Web應(yīng)用時,實(shí)現(xiàn)多行文本顯示通常需要用到HTML標(biāo)簽或JavaScript特定函數(shù),本文介紹了如何使用JavaScript的$createElement函數(shù)來創(chuàng)建多行文本顯示,$createElement可以創(chuàng)建任何HTML標(biāo)簽,使得在JavaScript中控制HTML輸出更加靈活,通過簡單的代碼示例2024-10-10
這篇文章主要介紹了vue的傳參方式和router使用技巧,本文給大家列舉了好幾種傳參方式，需要的朋友可以參考下2018-05-05
vue treeselect獲取當(dāng)前選中項(xiàng)的label實(shí)例
這篇文章主要介紹了vue treeselect獲取當(dāng)前選中項(xiàng)的label實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
父子組件生命周期及子組件獲取數(shù)據(jù)傳值問題剖析
這篇文章主要介紹了父子組件生命周期及子組件獲取數(shù)據(jù)問題剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-10-10
Element中select多數(shù)據(jù)加載優(yōu)化的實(shí)現(xiàn)
本文主要介紹了Element中select多數(shù)據(jù)加載優(yōu)化的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
關(guān)于uniapp的高級表單組件mosowe-form
這篇文章主要介紹了關(guān)于uniapp的高級表單組件mosowe-form,由于一些表單標(biāo)簽改來改去比較繁瑣，重復(fù)性很多，且樣式布局啥的幾乎萬變不離其中，為了偷懶，開發(fā)了mosowe-form及mosowe-table兩款高級組件,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue關(guān)于自定義指令與v-if沖突的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue手動埋點(diǎn)設(shè)計的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue手動埋點(diǎn)設(shè)計的相關(guān)資料,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,需要的朋友可以參考下2022-03-03