什么是样式穿透？scoped是什么？

什么是样式穿透？scoped是什么？

很多人在学习scss和less的时候会问个问题scoped是干嘛用的?

为什么我在写css的时候无法成功设置样式，必须删除scoped才可以设置样式？

这里我先给大家演示一个问题

单页面设置样式纯在的问题

我们编写2个页面

我们对第一个页面里的字体设置一个猛男粉

<template>
  <div class="app-container">
    <span class='ningmengla'>
      柠檬啦灬1
    </span>
  </div>
</template>
<style>
.ningmengla {
  color: pink
}
</style>

在第二个页面里不设置如何的样式

<template>
  <div class="app-container">
    <span class="ningmengla">
      柠檬啦灬2
    </span>
  </div>
</template>

• 大家想想会有什么效果？
  • 是不是认为页面1的字体是粉色，页面2的字体是黑色？
  • 然而你想的不全对哦，我们来试一下看看

• 那为什么会出现这样的问题呢？
  • 原因非常简单
  • 因为是单页面应用。每个页面的样式都会加载到全局里。所有就会串在一起

如何解决上面的问题scoped

给我们的样式加上scoped

<style scoped>
.ningmengla {
  color: pink
}
</style>

• 那为什么加上这个scoped就会不出现这个问题了呢？

  • 我们f12查看代码

• 可以看见我们多了一串[data-v-xxxx]的内容

• 这个就是vue给我们加上的，他会以组件为单位，给所有的元素加上同一个组件id

• vue只会在我们写的样式上以属性选择器的方式拼接上唯一标识

  • 这里要注意vue只会把这个属性选择器拼接在最后一段

    div a{} 拼接在a后面
    如果有, 他就是另一个样式
    dia a,b{} 拼接在a和b的后面
    

样式穿透

我们写一个这样的页面

<template>
  <div class="app-container">
    <el-input class="ningmengla"></el-input>
  </div>
</template>
<style lang="scss" scoped>
.ningmengla {
  width: 200px;
}
/* 这里我们想去修改input的背景颜色 发现修改失败 */
.ningmengla input{
  background-color: pink
}
</style>

• 为什么会修改失败呢？

  • 我们查看网页代码

    .ningmengla[data-v-e97432b2] {
      width: 200px;
    }
    /* 和上面提到的一样 这里要注意vue只会把这个属性选择器拼接在最后一段 所以我们自己的样式就没有了唯一标识 */
    .ningmengla input[data-v-e97432b2] {
      background-color: pink;
    }
    

• 解决方式

  • scss
    • ::v-deep
  • less
    • /deep/

.ningmengla::v-deep input{
  background-color: pink
}
/* 这样页面的代码就变成了 */
.ningmengla[data-v-e97432b2] input{
  background-color: pink;
}

就会发现页面被成功修改

• 这里要注意::v-deep的位置
  • .ningmengla::v-deep
    • .ningmengla[data-v-e97432b2]
  • ::v-deep.ningmengla
    • [data-v-e97432b2].ningmengla

如何确定是否要使用样式穿透

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-loaRtJM6-1632826710422)(闪电GIF制作软件\如何确定是否要使用样式穿透.jpg)]

当我们发现元素上没有唯一标识就可以考虑使用样式穿透了
:v-deep.ningmengla
- [data-v-e97432b2].ningmengla

如何确定是否要使用样式穿透

当我们发现元素上没有唯一标识就可以考虑使用样式穿透了

小广告

本人承接毕业设计，可以包教学讲解（后端代码和前端js部分一行一行的解释哦），保证论文的通过率！以及java和前端的bug解决（可以远程，也可以包教学）。接下来我会慢慢的一点点更新希望大家关注我哦！！！