目錄
- /deep/錯誤嵌套用法導致的ios移動端真機樣式失效問題（ >>>、 /deep/、::v-deep）
- 正確的寫法
- scoped
- 深度作用選擇器
/deep/錯誤嵌套用法導致的ios移動端真機樣式失效問題（ >>>、 /deep/、::v-deep）
bug：在瀏覽器和安卓上樣式都是對的，在ios上樣式完全失效
直接上代碼：
<style lang="scss" scoped>
.container {
position: relative;
/deep/ .van-tabs__wrap {
border: 0;
/deep/ .van-tabs__line {
position: absolute;
bottom: -0.01rem;
left: 0rem;
background-color: transparent;
background-image: url("../../assets/img/arrows.png");
background-size: contain;
width: 0.46rem;
height: 0.14rem;
z-index: 1;
background-repeat: no-repeat;
}
}
</style>
瀏覽器和安卓上樣式都是對的，ios上.van-tabs__line的樣式全部未生效！
上面的代碼瀏覽器編譯出來是這樣的：
修改第三方庫的樣式，或者多層父子組件嵌套，在父組件中修改子組件的時候，就有了上面的的錯誤寫法/deep/嵌套使用，決議成了這樣，
正確的寫法
<style lang="scss" scoped>
.container {
position: relative;
/deep/ .van-tabs__wrap {
border: 0;
.van-tabs__line {
position: absolute;
bottom: -0.01rem;
left: 0rem;
background-color: transparent;
background-image: url("../../assets/img/arrows.png");
background-size: contain;
width: 0.46rem;
height: 0.14rem;
z-index: 1;
background-repeat: no-repeat;
}
}
</style>
編譯后是這樣的：
這種寫法本身是錯誤的，但是瀏覽器卻可以兼容，并且正確的識別，所以在瀏覽器、安卓樣式會正常生效，但是ios就不會了就會出現瀏覽器除錯時都是正確的，但是ios樣式永遠不會生效的奇葩問題，，
這些問題都是因為對/deep/沒有深刻理解😑😑😑，下面一起來學習一下吧！
scoped
（deep是和scoped屬性結合使用的，所以我們需要先了解scoped的作用）
為了避免當前組件的樣式影響其他組件的樣式，<style> 標簽使用scoped生成唯一的hash碼，以此限制此樣式只對該組件生效，
<style scoped>
.example .a{
color: red;
}
</style>
<template>
<div class="example">
<div class="a">
hi
</div>
</div>
</template>
編譯后：
<style>
.example .a[data-v-f3f3eg9] {
color: red;
}
</style>
<template>
<div class="example" data-v-f3f3eg9>hi</div>
</template>
子組件的根元素
使用 scoped 后，父組件的樣式將不會影響子組件的樣式，不過子組件的根節點會同時受其父組件的 scoped CSS 和子組件的 scoped CSS 的影響，這樣設計是為了讓父組件可以從布局的角度出發，調整其子組件根元素的樣式，
混用本地和全域樣式
你可以在一個組件中同時使用有 scoped 和非 scoped 樣式：
<style>
/* 全域樣式 */
</style>
<style scoped>
/* 本地樣式 */
</style>
深度作用選擇器
因為子組件和父組件的hash碼不一致，選擇器匹配不到，使用>>>或者 /deep/ 來幫我們提升作用域，
<style scoped>
.example >>> .a{
color: red;
}
</style>
決議出來是這樣的：
.example[data-v-136D8ch5] .a { /* ... */ }
hash碼被提到了上一層級，由于沒有hash碼的限制，那么自然可以匹配到子組件的.a元素，樣式會生效，同時又有上層的hash值控制，所以就不會對和此父組件同層級的其他組件內的樣式產生副作用啦，
>>> /deep/ ::v-deep
有些像 Sass 之類的前處理器無法正確決議 >>>，這種情況下你可以使用 /deep/ 或 ::v-deep 運算子取而代之——兩者都是 >>> 的別名，
文章到這里就寫完了，如果你有其他的補充或者覺得我有什么地方說得不對的話可以在評論區和我一起探討，😁
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/265954.html
標籤：其他
上一篇：Typora軟體圖片丟失問題
下一篇：5個月前，如果你沒有不屑于刷這份《位元組內推+面試寶典》，今天坐到位元組Android部門，年薪70w+的人就是你了......