自定义radio,checkbox,轮播点样式

今天就贴几段代码,因为不知道小程序选择器是如何选择到.wx-checkbox-input,.wx-swiper-dots 等元素的,控制台审查元素都试过了就是找不出来,希望有大神指点一下

/*自定义轮播点样式*/
/*不明白这里的.wx-swiper-dots等一系列选择器是怎么被找出来的*/
swiper .wx-swiper-dots.wx-swiper-dots-horizontal{
  margin-bottom: 2rpx;
}
swiper .wx-swiper-dot{
  width:40rpx;
  display: inline-flex;
  height: 10rpx;
  margin-left: 20rpx;
  justify-content:space-between;
}
swiper .wx-swiper-dot::before{
  content: '';
  flex-grow: 1; 
  background: rgba(255,255,255,0.8);
  border-radius: 8rpx
}
swiper .wx-swiper-dot-active::before{
  background:rgba(244,0,0,0.8);   
}

/*自定义checkbox样式*/
checkbox .wx-checkbox-input{
  border-radius: 50%;
  width: 30rpx;
  height: 30rpx;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
  border: none;
  background: #29C427;
  background-size: 100% 100%;
  border: 1px solid #dddddd;
}
 checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
  border-radius: 50%;
  width: 30rpx;
  height: 30rpx;
  line-height: 30rpx;
  text-align: center;
  font-size:28rpx;
  color:#fff;
  background: transparent;
  transform:translate(-50%, -50%) scale(1);
  -webkit-transform:translate(-50%, -50%) scale(1);
} 

/*自定义四radio样式*/
radio .wx-radio-input{
    border-radius:50%;
    width:20px;height:20px;
}
radio .wx-radio-input.wx-radio-input-checked{
    border-color:#F0302F !important;
    background:#F0302F !important;
}
radio .wx-radio-input.wx-radio-input-checked::before{
    border-radius:50%;
    width:20px;
    height:20px;
    line-height:20px;
    text-align:center;
    font-size:15px;
    color:#fff;
    background:transparent;
    transform:translate(-50%, -50%) scale(1);
    -webkit-transform:translate(-50%, -50%) scale(1);

}