深度解析为什么vue组件中添加scoped后某些样式不生效？给出解决办法

近期使用 vue 时写发现某些样式不生效，怎么都不生效， 不过将style 中的 scoped 去掉后，居然生效了，那么出现样式不生效的原因肯定就是 scoped 的问题

vue给出的解决办法是： 深度作用选择器 给每个 标签添加 /deep/

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符
有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。

<style lang="less" scoped>
.box_cj {
  padding-left: 100px;
  padding-top: 30px;

  /deep/ .box_info {
    display: flex;
    align-items: center;

    .box_imag {
      // border-width: 0px;
      // position: absolute;
      // left: 0px;
      // top: 0px;
      width: 80px;
      height: 80px;
      border-radius: 100%;
    }
    .box_name {
      margin-left: 15px;
      font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC",
        sans-serif;
      font-weight: 650;
      font-style: normal;
      font-size: 18px;
      // text-align: center;
    }
    .box_list {
      margin-top: 10px;
      // line-height: 40px;
      color: #333333;
      font-size: 14px;
      font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
      font-weight: 400;
      font-style: normal;
      // text-align: center;
    }
  }
  //点亮证书
  /deep/.nav_info {
    margin-top: 80px;
    width: 600px;
    height: 271px;
    padding-left: 40px;
    padding-right: 40px;
    background: inherit;
    // background-color: rgba(255, 255, 255, 1);
    background: white;

    // background: pink;
    border: none;
    border-radius: 10px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
    font-weight: 400;
    // font-style: normal;
    // font-size: 28px;
    // 点亮证书
    .nav_dl {
      position: absolute;
      align-self: center;
      top: 160px;
      left: 260px;
      // padding: 2px 2px 2px 2px;
      box-sizing: border-box;
      width: 250px;
      height: 55px;
      line-height: 50px;
      background: #ececee;
      font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 28px;
      border-radius: 10px;
      text-align: center;
    }

    .nav_cent {
      display: flex;
      justify-content: space-evenly;
      text-align: center;
      padding-top: 62px;
      flex-wrap: wrap;

      .nav_it {
        margin-right: 20px;
        margin-bottom: 10px;
        .nav_img {
          width: 89px;
          height: 76px;
          position: relative;
        }
        .img_bjdt {
          width: 44px;
          height: 38px;
          border-radius: 50%;
          position: absolute;
          margin-top: -69px;
          margin-left: -22px;
        }

        .nav_tit {
          color: #333333;
          font-size: 14px;
          font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
          font-weight: 400;
          font-style: normal;
          // text-align: center;
        }
      }
    }
  }

  /deep/ .box_dialog_nav {
    .el-dialog {
      margin-top: 200px !important;
      border-radius: 5px;
    }
    .el-dialog__header {
      padding: 0px !important;
    }
    .el-dialog__body {
      padding: 0 0 20px 0 !important;
    }
    .box_dialog_top {
      // width: 294px;
      height: 60px;
      line-height: 60px;
      background-color: rgba(215, 215, 215, 1);
      border-radius: 5px 5px 0 0;
      font-family: "Arial Normal", "Arial", sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 26px;
      color: #333333;

      text-align: center;
    }
    .box_dialog_info {
      padding: 0 20px 20px 20px;

      color: #333333;

      .box_dialog_cent {
        margin-top: 10px;
        .box_dialog_name {
          font-family: "PingFangSC-Semibold", "PingFang SC Semibold",
            "PingFang SC", sans-serif;
          font-weight: 650;
          font-style: normal;
          font-size: 18px;
        }
        .box_dialog_tit {
          margin-left: 10px;
          font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
          font-weight: 400;
          font-style: normal;
          font-size: 16px;
        }
      }
      .box_dialog_cg {
        font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        margin-top: 10px;
      }
      //
      .box_dialog_xl {
        display: flex;
        align-items: center;

        margin-top: 10px;
        .nav_sp1 {
          font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
          font-weight: 400;
          font-style: normal;
          font-size: 13px;
        }
        .nav_sp2 {
          width: 150px;
          height: 22px;
          line-height: 22px;
          background: inherit;
          background-color: rgba(242, 242, 242, 1);
          border: none;
          border-radius: 10px;
          .sp2 {
            margin-left: 10px;
            box-shadow: none;
            font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
            font-weight: 400;
          }
        }
      }
      .box_dialog_cx {
        margin-left: 25px;
      }
      // 项目标签
      .box_dialog_mp {
        .nav_sp2_mp {
          border-radius: 10px;
          background-color: rgba(242, 242, 242, 1);
          width: 150px;
          .mp_tit {
            padding: 2px 10px;

            .sp2_mp {
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              /*! autoprefixer: off */
              -webkit-box-orient: vertical;
              /* autoprefixer: on */
            }
          }
          // margin-top: 10px;
          // padding-top: 10px;
        }
      }
      .YWC {
        border-width: 0px;
        position: absolute;
        left: 190px;
        top: 310px;
        width: 99px;
        height: 100px;
        display: flex;
        .YWC_IMG {
          width: 99px;
          height: 100px;
        }
      }
    }
    // 底部按钮
    .box_btn {
      text-align: -webkit-center;
      .elbutton {
        // margin-top: 20px;
        // margin-bottom: 10px;
        text-align: center;
        width: 122px;
        display: flex;
        font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
        font-weight: 400;
        font-style: normal;
        padding: 0;
        height: 30px;
        line-height: 30px;
        justify-content: space-around;
        border: 1px solid #797979;
      }
    }
  }
  // 返回
  .back_nav {
    font-size: 50px;
    position: absolute !important;
    top: 33% !important;
    left: 0%;
  }
}
</style>