欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決vue單頁面修改樣式無法覆蓋問題

 更新時(shí)間：2019年08月05日 16:39:05   作者：CcChan  
這篇文章主要介紹了vue單頁面修改樣式無法覆蓋問題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

當(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單頁面修改樣式無法覆蓋問題,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

相關(guān)文章

最新評(píng)論