什么是样式穿透?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/
- scss
.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
- .ningmengla::v-deep
如何确定是否要使用样式穿透
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-loaRtJM6-1632826710422)(闪电GIF制作软件\如何确定是否要使用样式穿透.jpg)]
当我们发现元素上没有唯一标识就可以考虑使用样式穿透了
:v-deep.ningmengla
- [data-v-e97432b2].ningmengla
如何确定是否要使用样式穿透
当我们发现元素上没有唯一标识就可以考虑使用样式穿透了
小广告
本人承接毕业设计,可以包教学讲解(后端代码和前端js部分一行一行的解释哦),保证论文的通过率!以及java和前端的bug解决(可以远程,也可以包教学)。接下来我会慢慢的一点点更新希望大家关注我哦!!!