解決vue單頁面修改樣式無法覆蓋問題
當(dāng) <style> 標(biāo)簽有 scoped 屬性時(shí)，它的 CSS 只作用于當(dāng)前組件中的元素。
vue組件編譯后，會(huì)將 template 中的每個(gè)元素加入 [data-v-xxxx] 屬性來確保 style scoped 僅本組件的元素而不會(huì)污染全局。
比如：
<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樣式，你會(huì)發(fā)現(xiàn)是沒有效果的
有兩個(gè)解決辦法
方法一
你可以在一個(gè)組件中同時(shí)使用有作用域和無作用域的樣式：
<style scoped>
.example{
// ...
}
</style>
<style>
.example span {
// ...
}
</style>
方法二
深度作用選擇器
如果你希望 scoped 樣式中的一個(gè)選擇器能夠作用得“更深”，例如影響子組件，你可以使用 >>> 操作符：
只作用于css?。。。。。。。。。。。。?！
<style scoped>
.a >>> .b { /* ... */ }
</style>
上述代碼將會(huì)編譯成：
.a[data-v-f3f3eg9] .b { /* ... */ }
如果是sass/less的話可能無法識(shí)別，這時(shí)候需要使用 /deep/ 選擇器了。
<style lang="less" scoped>
/deep/ .b {
color: #000;
}
}
</style>
總結(jié)
以上所述是小編給大家介紹的解決vue單頁面修改樣式無法覆蓋問題,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
Vue后臺(tái)管理系統(tǒng)權(quán)限控制與動(dòng)態(tài)路由的實(shí)現(xiàn)
本文主要介紹了Vue后臺(tái)管理系統(tǒng)權(quán)限控制與動(dòng)態(tài)路由的實(shí)現(xiàn),可以根據(jù)用戶的角色靈活控制頁面訪問權(quán)限,提高系統(tǒng)的安全性和用戶體驗(yàn),感興趣的可以了解一下2025-04-04
基于Vue開發(fā)一個(gè)很火的卡片動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了如何基于Vue開發(fā)一個(gè)很火的卡片動(dòng)畫效果,大致包含兩個(gè)效果,光的跟隨效果還有卡片傾斜像?3D?的效果,感興趣的可以了解一下2024-02-02
解決vue中使用swiper插件問題及swiper在vue中的用法
Swiper是純javascript打造的滑動(dòng)特效插件，面向手機(jī)、平板電腦等移動(dòng)終端。這篇文章主要介紹了解決vue中使用swiper插件及swiper在vue中的用法,需要的朋友可以參考下2018-04-04
vue使用js-file-download插件下載文件亂碼的解決
這篇文章主要介紹了vue使用js-file-download插件下載文件亂碼的解決,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
本篇文章主要介紹了Vue中render函數(shù)的使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要為大家詳細(xì)介紹了vue中常見的加密方式實(shí)現(xiàn),例如js-base64、crypto-js、jsencrypt、bcryptjs,文中的示例代碼講解詳細(xì),需要的小伙伴可以參考一下2023-11-11
vue App.vue中的公共組件改變值觸發(fā)其他組件或.vue頁面監(jiān)聽
這篇文章主要介紹了vue App.vue里的公共組件改變值觸發(fā)其他組件或.vue頁面監(jiān)聽,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
ElementUI實(shí)現(xiàn)在下拉列表里面進(jìn)行搜索功能詳解
有時(shí)候需要用到下拉列表全選和搜索,下面這篇文章主要給大家介紹了關(guān)于ElementUI實(shí)現(xiàn)在下拉列表里面進(jìn)行搜索功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
vue實(shí)現(xiàn)移動(dòng)端省市區(qū)選擇
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端省市區(qū)選擇，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了vue項(xiàng)目中禁用瀏覽器緩存配置案例,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09