33.vue中如何在单文件中修改第三方的样式

1.怎样覆盖第三方库中的样式

屏幕快照 2018-09-05 17.33.44.png

在谷歌浏览器的检查元素中发现这个弹出框的样式是，所以我们需要修改的样式就是 div.mu-popover.transition-bottom {

//1.设置之后发现样式并没有发生任何改变，
//因为scoped代表这个样式只应用于这个单独的文件，所以我去掉scoped这个
//2.这次样式改变了但是我看看我其他的界面，竟然乱了，为啥？
//因为去掉scoped代表全部的文件都使用这个样式，那有ul .mu-list  的地方就出问题了
<style scoped lang='less'>
  div.mu-popover.transition-bottom {
     top: 92px!important;
     right:0!important;
     height: 120px!important;
   }
ul .mu-list {
    height: 100%;
    padding: 0px;
    margin: 0px;
}
  div .mu-item-title {
            padding: 0px;
            margin: 0px;
            height: 60px;
            line-height: 60px;
            font-size: 30px;
            text-align: center;
   }

这里先补充一个知识点

.a.b和.a .b之间的区别，.a.b 是且的关系意思就是2者必须都具备，而.a .b是上下级，父子关系

<!--.a.b-->
<div class="a b"></div>
<!--.a .b-->
<div class="a">
    <div class="b"></div>
</div>

解决tips：在style中去掉scoped改变第三方的样式的时候，将样式写成嵌套的样子，而不是单独分开，这样可以避免改变第三方库在其他地方使用的时候样式更改

父选择器运算符 & 的作用，就是让当前的选择器和父级选择器，按照特定的规则进行连接。

采用下面的方法来设置样式

<style lang='less'>
  div.mu-popover.transition-bottom {
      top: 92px!important;
      right:0!important;
      height: 120px!important;
      &>ul.mu-list {
        height: 100%;
        padding: 0px;
        margin: 0px;
        &>li{
          height: 60px;
          line-height: 60px;
          &>a.mu-item-wrapper {
            height: 60px;
            line-height: 60px;
            &>div.mu-item {
              height: 60px;
              line-height: 60px;
              &>div.mu-item-content {
                height: 60px;
                line-height: 60px;
                &>div.mu-item-title {
                  padding: 0px;
                  margin: 0px;
                  height: 60px;
                  line-height: 60px;
                  font-size: 30px;
                  text-align: center;/*让文字水平居中*/
                }
              }
            }
          }
        }
      }
  }
</style>

屏幕快照 2018-09-05 17.44.32.png

注：在全局使用一个样式的时候，一定要注意像常用的div li p
之类的一定要嵌套在一定的条件下使用，不然很容易出现别的界面的错乱。

一般第三方的弹出框在检查界面元素的时候都会在这个页面的最底部出现。