vue中單頁面修改樣式無法覆蓋如何解決

vue中單頁面修改樣式無法覆蓋如何解決？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

當 <style> 標簽有 scoped 屬性時，它的 CSS 只作用于當前組件中的元素。

vue組件編譯后，會將 template 中的每個元素加入 [data-v-xxxx] 屬性來確保 style scoped 僅本組件的元素而不會污染全局。

比如：

<style scoped>
 .example {
 color: red;
 }
</style>

<template>
 <div class="example">hi</div>
</template>

轉換結果：

<style>
 .example[data-v-f3f3eg9] {
 color: red;
}
</style>

<template>
 <div class="example" data-v-f3f3eg9>hi</div>
</template>

如果你想修改class="example"里面的span樣式，你會發現是沒有效果的

有兩個解決辦法

方法一

你可以在一個組件中同時使用有作用域和無作用域的樣式：

<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>

Vue的優點

Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。

關于vue中單頁面修改樣式無法覆蓋如何解決問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。