在有源离子滑块上实现“有源” CSS类

Question

我想更改DOM中活动幻灯片的CSS

  

.html

 <ion-slides>
  <ion-slide class="swiper-slide"></ion-slide>
  <ion-slide class="swiper-slide active"></ion-slide> // <-- Active slide in DOM
  <ion-slide class="swiper-slide"></ion-slide>
 </ion-slides>

先谢谢了。

  

.scss

  .slider_selected_text{
    color : #ed1a3b
    }
 .slider_unselected_text{
   }

Answer 1

很难确定您是要向active端添加sccs类还是要向ion-slide元素动态添加CSS类。我假设您正在要求scss一方。如果不是这样，请告诉我，我将更新答案。

您可以像这样向.active文件中添加scss类：

.swiper-slide {

   // Assuming "slider_selected_text" is covered by "swiper-slide" class

  & .slider_selected_text{ // note that there is a space between & and class name
    color : #ed1a3b
  }

  & .slider_unselected_text{

  }

  &.active{ // note that there is NOT a space between & and class name means this will apply to the elements having both classes

     & .slider_selected_text{ // note that there is a space between & and class name
        color : #ed1a3b
      }

      & .slider_unselected_text{

      }
  }

}

希望这会给您一个线索。