css样式穿透（/deep/和::v-deep以及＜＜＜深度选择器）
创始人
2024-04-27 18:42:27
0次
css样式穿透（/deep/深度选择器）
- 场景复现
- 样式穿透
- stylus的样式穿透 使用>>>（不推荐）
- sass和less的样式穿透（推荐）
场景复现
当我们使用ant design vue组件库（点击跳转查看相关内容）时，经常会遇到样式无法修改的问题。这是因为 ant design vue 组件库的组件都具有自带的默认样式。
- 通过查询资料后发现是scoped的问题。
- scoped看起来很好用，但是在vue项目中，当我们引入第三方组件库（比如
ant design vue UI组件库）时，需要在局部组件中修改第三方组件库的样式，而又不想去除因scoped属性而造成的组件之间样式覆盖的问题。 - 这个时候我们就可以通过 样式穿透 这个特殊方式，穿透原有的默认样式，实现需要的效果。
样式穿透
stylus的样式穿透 使用>>>（不推荐）
语法：
- 外层容器 >>> 组件 { }
从组件A穿透到组件B：
.A >>> .B { background: #fff
}
sass和less的样式穿透（推荐）
这两个常用的样式穿透的方式有两种，分别是 /deep/ 与 ::v-deep。
语法：
- 外层容器 /deep/ 组件 { }
- 外层容器 ::v-deep组件{ }
::v-deep与/deep/都是深度选择器（样式穿透），都能实现对组件内部的样式修改。
（两种方式没有很大的区别，如果用/deep/无效，则换用::v-deep试试，一般都是有效的。）
/* 从A组件深层穿透到B*/
.A /deep/ .B {border-color: #fff !important;
}
/* 从C组件深层穿透到button*/
.C ::v-deep button {height: 25px;
}
/* 深层穿透到switch*/
::v-deep .ant-switch ::after {height: 21px;width: 21px;
}
Less和sacc都可以进行 样式叠加（嵌套） 的写法，不过使用样式穿透的时候，写法会有些不一样。
/* 两层嵌套*/
.A ::v-deep {button {height: 25px;}.B ::after {height: 21px;width: 21px;}
}
注意： 确保样式嵌套层级正确。
文章发展线
| 本专题文章发展线 |
|---|
| css实现鼠标禁用（鼠标滑过显示红色禁止符号） |
| css样式穿透（/deep/深度选择器） |
| vue antd项目实战——修改ant design vue table组件的默认样式（css样式穿透） |
| 通过ant design vue的API属性实现不可控操作 |
| vue antd项目实战——根据数据属性实现table表格中行的不可控操作 |
上一篇：网络技术展开型介绍（超详细）
相关内容
热门资讯
中斯新能源合作迈入新阶段
转自：光明日报 【机遇东方来】 近期，斯洛伐克政府宣布西部舒拉尼工业园区投资项目上升为国家战略投...
证监会：从五方面健全投资者保护...
◎记者 梁银妍 汤立斌 中国证监会副主席陈华平5月15日在2025年“5·15全国投资者保护宣传日”...
嘉泽新能陈波：前瞻布局抢抓“新...
◎记者 于瑶 面对激烈的市场竞争，新能源发电企业如何及时调整布局、加速转型升级并抢抓发展机遇？近日，...
证监会举办“5·15全国投资者...
高晓力表示，最高法将依法严厉打击欺诈发行、违规信息披露等财务造假违法犯罪行为，坚持“追首恶”“打帮凶...
中国将对巴西等5国试行免签政策
外交部发言人林剑15日在例行记者会上说，为进一步便利中外人员往来，中方决定扩大免签国家范围，...
2025青海文化旅游节5月19...
本报讯（西海新闻记者 吴梦婷）记者从2025青海文化旅游节新闻发布会了解到，2025青海文化旅游节以...
罗东川会见北京大学校长龚旗煌
...
本报讯（记者 田得乾 石成砚）5月15日，省委副书记、省长罗东川在西宁会见北京大学校长、中国科学院院...
重庆奉节“科技小院”让村民尝到...
本报讯（记者黄仕强）“2024年村民户均收入超过12万元，村集体经济收入突破300万元。”5月14日...
无强制评级后信评格局生变：主体...
自2021年证监会、交易商协会逐步取消债券发行环节的强制评级要求后，去年已是我国债券市场无强制评级的...
内蒙古首个“绿电直供”算力中心...
转自：内蒙古日报本报5月15日讯 （记者 康丽娜）记者从自治区能源局获悉，“全国一体化算力网络”...
老人的两万元不翼而飞 民警快速...
本报讯（西海新闻记者 郭红霞）“多亏了宝库派出所的民警，不然两万元就没了。”5月14日，说起前几天发...
西宁城中“宁晓哥”小程序上线
本报讯（西海新闻记者 燕卓）5月14日，记者从西宁市城中区获悉，为给快递员、外卖配送员、网约车司机等...
风电设备生产忙
转自：内蒙古日报5月14日，运达股份北方总部（乌兰察布）智能产业基地生产车间内工人们有序工作，确保风...
红色话剧《我们正青春年少》走进...
本报石河子讯（全媒体记者 史进 通讯员 李凤华） 日前，新疆大学原创红色话剧《我们正青春年少...
青海举办“5·15”打击和防范...
本报讯（西海新闻记者 何耀军）2025年5月15日是第16个全国公安机关打击和防范经济犯罪宣传日。青...
中方将对巴西等五国试行免签政策
新华社北京5月15日电外交部发言人林剑15日在例行记者会上说，为进一步便利中外人员往来，中方决定...
【促进民营经济高质量发展】河南...
本报讯（记者余嘉熙 通讯员葛慧君）蜜雪冰城从郑州一家街头小店，发展成全球最大现制饮品企业，并在港交所...
“青铜之光——古蜀文明特展”在...
近日，“青铜之光——古蜀文明特展”在新斯米尔尼市政博物馆开幕。展览通过精美的文物复制品、3D打印技术...
人工智能教育指南深意何在
徐向东 近日，教育部基础教育教学指导委员会发布《中小学人工智能通识教育指南(2025年...
兵团投入2081万元推动文旅产...
本报乌鲁木齐讯（全媒体记者 张美玲） 记者从兵团财政局获悉，今年，兵团本级财政统筹专项资金20...