欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

样式穿透浅解笔记

程序员文章站 2022-07-06 16:00:52
1、什么是样式穿透? 父组件中修改子组件的样式2、怎样进行样式穿透 1)使用 css 时可以用 >>> 进行样式穿透 .parent >>>.child { font-size: 16px; } 2)使用 scss, less 时,可以用 /deep/ 进行样式穿透 .parent /deep/ .child { fo......

1、什么是样式穿透?

        我们说所的穿透,官方叫做深度选择器。就是在我们想穿透的选择器前边添加 >>> 或者 /deep/ 或者 ::v-deep。比如说父组件中修改子组件的样式

2、什么情况下会使用样式穿透

       在vue开发过程中,当我们引入第三方组件库时(如使用element-ui),需要在局部组件中修改第三方组件库样式,而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过一些方法穿透scoped。

3、怎样进行样式穿透

         1)使用 css 时可以用 >>> 进行样式穿透

         外层类  >>> 想要修改类名 {
                 修改样式
         }

        例:  .wrapper  >>>.el-tag--warning {
         color: #e6a23c;
         }

        2)使用 scss, less 时,可以用 /deep/ 进行样式穿透

        外层类  /deep/ 想要修改类名 {
                 修改样式
         }

        例:.wrapper  /deep/ .el-tag--warning {
       color: #e6a23c;
        }

       3)使用stylus时也可以使用 >>>进行样式穿透

        外层类  >>> 想要修改类名 {
                 修改样式
         }

        例: .wrapper  >>> .el-tag--warning{
        color: #e6a23c;
        }

      4)通用样式穿透可以使用::v-deep

        ::deep 想要修改类名 {
                 修改样式
         }

       例: ::v-deep .el-tag--warning{
        color: #e6a23c;
      }

本文地址:https://blog.csdn.net/chendu98/article/details/109254264

相关标签: 1024程序员节