您现在的位置是：首页 >技术杂谈 >父组件app.vue的＜style scoped＞再加上::DEEP穿透，会覆盖其他的子组件分页器的样式，希望子组件和父组件的分页器样式各自不同，怎么解决？网站首页技术杂谈

我现在遇到一个问题：在我的APP.VUE中，

<style scoped>

.swiper-pagination-bullet { width: 8px; height: 8px; background: #fff; opacity: 0.5; margin: 0 5px; border-radius: 50%; display: inline-block; }

.swiper-pagination-bullet-active { transform: translateY(-2px);

/* 设置激活状态下小圆点的背景颜色 */

background-color: #ff0000;

/* 设置激活状态下小圆点的宽度 */

width: 12px;

/* 设置激活状态下小圆点的高度 */

height: 12px;

/* 设置激活状态下小圆点的透明度 */

opacity: 1; }

</style>

.swiper-pagination-bullet 和.swiper-pagination-bullet-active设置好了，显示不了效果，但是如果加上::deep的话，又会覆盖其他几个VUE。

方法：更具体的选择器

你可以通过增加选择器的具体性来确保样式只应用于特定的Swiper组件。例如，如果你的Swiper组件有一个唯一的ID或类名，你可以这样写：

<style scoped>
#my-swiper ::v-deep .swiper-pagination-bullet {
  /* ... */
}

#my-swiper ::v-deep .swiper-pagination-bullet-active {
  /* ... */
}
</style>

然后在你的Swiper组件上添加这个ID：

<Swiper id="my-swiper">
  <!-- Swiper slides -->
</Swiper>

这样就可以解决了，当然，在其他几个子VUE中，都是用<style scoped>

::v-deep .swiper-pagination-bullet {
          width: 8px;
          height: 8px;
          background:  #fff000;
          opacity: 0.5;
          margin: 0 5px;
          border-radius: 50%;
          display: inline-block;
        }    

::v-deep .swiper-pagination-bullet-active {
    transform: translateY(-2px);
     /* 设置激活状态下小圆点的背景颜色 */
    /* background: mediumvioletred; */
    
        background-color:lavender; 
       /* 设置激活状态下小圆点的宽度 */
       width: 12px; 
       /* 设置激活状态下小圆点的高度 */
       height: 12px; 
       /* 设置激活状态下小圆点的透明度 */
       opacity: 1; 
 
}
.swiper-button-prev,
        .swiper-button-next {
          color: #fff;
        }
</style>