当
<style>标签有scoped属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。
关于 Vue CSS深度作用选择器 相关的描述建议大家先阅读官方的文档
Vue CSS深度作用选择器官方文档
https://vue-loader.vuejs.org/zh/guide/scoped-css.html
Vue CSS深度作用选择器常用的使用场景就是覆盖自定义组件的样式（有可能组件提供的属性并不满足你的需求），下面以 uView UI 在 微信小程序 平台为例，通过 CSS深度选择器写出一个背景渐变的按钮。
以上述示例代码，详细讲解具体的步骤
1、找到需要覆盖的节点，通过检索DOM元素，找到有关于按钮背景颜色的 class 名称。如下图所示，设置按钮背景颜色的类名为 .u-button--primary (代码中不需要包含类名后面的 hash 码)
2、通过 深度作用选择器 >>> 覆盖 按钮样式
.test >>> .u-button--primary{
border: none !important;
background-image:linear-gradient(to right,yellow,red);
}
如上图所示，按钮颜色被成功覆盖，CSS是否需要使用强制 !important ，需视组件的具体情况而定，只需要设置比组件内样式优先级更高即可。
参考Vue官方的文档说明，下面是 scss 的写法
.test{
padding: 50rpx;
/deep/ .u-button--primary{
border: none !important;
background-image:linear-gradient(to right,yellow,red);
}
}
示例代码中，被覆盖的类名前面都添加了 父级类名 .test ，这是推荐做法，有些平台是必须拥有 父级类名，这也能明确该深度覆盖选择器的范围。
如果你看完这篇文章还不会使用 Vue CSS深度作用选择器 ，那么请改行吧，web前端不适合你！
作者：黄河爱浪 QQ：1846492969，邮箱：helang.love@qq.com
本文原创，著作权归作者所有，转载请注明原链接及出处
标签：Vue,深度,CSS,按钮,选择器,类名 来源： https://blog.csdn.net/u013350495/article/details/121915489
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。