一文带你学会css样式穿透（深度选择器）

XSL_HR 2022-12-25 22:58:56

当我们使用ant design vue组件库时，经常会遇到样式无法修改的问题。这是因为 ant design vue 组件库的组件都具有自带的默认样式。通过查询资料后发现是scoped的问题。
scoped看起来很好用，但是在vue项目中，当我们引入第三方组件库（比如ant design vue UI组件库）时，需要在局部组件中修改第三方组件库的样式，而又不想去除因scoped属性而造成的组件之间样式覆盖的问题。
这个时候我们就可以通过样式穿透这个特殊方式，穿透原有的默认样式，实现需要的效果。

css样式穿透（深度选择器）

...全文

47 回复打赏收藏举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

相关推荐

问题：[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(＜inner-selector＞)CSS深度选择器(穿透)1、stylus的样式穿透使用>>>（不推荐）

我们需要使用样式穿透（深度选择器），它有三种书写方式，分别针对原生css：>>> less: /deep/ 如果父组件的样式（scoped）且还想影响到子组件的样式像这种情况我们可以选择使用深度选择器，它可以实现样式穿透，看下图： scss:::v-deep......

css深度作用选择器的作用：如果使用了scoped后,无法修改第三方UI组件库组件的样式，这里可以使用css深度作用选择器，以作样式修改。例：vue项目中，经常需要使用如elementUI等组件库，有些样式直接在组件中修改无效，因为scoped局限于当前组件，去掉scoped的话又会影响全局样式。针对这种情况，可以使用深度作用选择器（即样式穿透）。具体用法 1、如果项目使用的是css原生样式，那么可以直接使用 >>> 穿透修改 <style scoped>

什么是样式穿透? 所谓的穿透，官方叫做深度选择器。当我们在view组件组件中写的样式,在检查网页时发现没有生效,原因是<style scoped></style> 中的scoped所致,当<style>标签有scoped属性时，它的 CSS 只作用于当前组件中的元素,此时就需要用到样式穿透如何使用深度选择器? 在我们想穿透的选择器前边添加 >>> 或者 /deep/ 或者 ::v-deep。>>>可能存在问题，建议...

在 vue 项目的开发过程，使用了 ElementUI 组件且样式 style 使用了 scoped 属性，当想要修改组件样式，发现直接修改不了，需去掉 scoped 属性或者使用深度选择器才能修改成功。去掉scoped的话又会影响全局样式，针对这种情况，可以使用深度作用选择器（即样式穿透）,最好使用深度选择器。本文对深度选择器做一个总结记录 1、当项目中使用的 css 原生样式，需要使用 >>> 深度选择器来修改外用第三方组件的样式 <style lang="css" s.

发帖

6.3w+

社区成员

1.4w+

社区内容

学习「算法」的捷径就是「题海战略」，社区由「夜深人静写算法」作者创建，三年ACM经验，校集训队队长，亚洲区域赛金牌，世界总决赛选手。社区提供系统的训练，答疑解惑，面试经验，大厂内推等机会

社区管理员

加入社区

帖子事件

创建了帖子

2022-12-25 22:58

社区公告

QQ群：480072171

英雄算法交流 8 群