猫头鹰旋转木马 - 不同于导航点的风格

Question

我使用了Owl Carousel 2测试版，我想在滑块导航中以不同的方式（大小和颜色）来设置样式。

就像那样：

不幸的是我有这个：

我试过这段代码：

<div class="owl-dots">
     <div class="first owl-dot active"><span></span></div>
     <div class="second owl-dot"><span></span></div>
     <div class="third owl-dot"><span></span></div>
</div>

.owl-theme .owl-dots .owl-dot.first span {
    height: 18px;
    width: 18px;
}

.owl-theme .owl-dots .owl-dot.first:hover span,
.owl-theme .owl-dots .owl-dot.first .active  span {
    background-color: #00c0f1;
}

.owl-theme .owl-dots .owl-dot.second span {
    height: 15px;
    width: 15px;
}

.owl-theme .owl-dots .owl-dot.second:hover span, 
.owl-theme .owl-dots .owl-dot.second .active span {
    background-color: #add036;
}

.owl-theme .owl-dots .owl-dot.third span {
    height: 12px;
    width: 12px;
}

.owl-theme .owl-dots .owl-dot.third:hover span,
.owl-theme .owl-dots .owl-dot.third .active span {
    background-color: #ec2426;
}

Answer 1

在你的所有css上，owl-dot类的选择器应该是

.owl-dot.first.active // remove the space you have between .active and .first

另外，你得到的是什么？您无法更改大小，也无法更改活动状态下的颜色？