引导轮播指示器自定义类添加

Question

我正在尝试为引导轮播添加自定义类，因为我希望对轮播指示器的更改仅反映在应用程序的一个点上

这是我的代码

.HTML：

<ol class="carousel-indicators custom">
<li data-target="#myCarousel" data-slide-to="0" class="active "></li>
<li data-target="#myCarousel" data-slide-to="1" class=""></li>
<li data-target="#myCarousel" data-slide-to="2" class=""></li>
</ol>

.CSS：

.custom .carousel-indicators .active {
    background:green !important;
}
.custom .carousel-indicators li {
    border:2px solid black !important;
}

但我无法在轮播指示器中看到我的任何更改。请为我提供正确的代码

Answer 1

删除 .custom 和 .carousel-indicators 之间的空格。

空格表示.carousel-indicators是.custom的后代，而实际上它们是相同的元素。

.custom.carousel-indicators .active {
  background: green !important;
}
.custom.carousel-indicators li {
  border: 2px solid black !important;
}

<ol class="carousel-indicators custom">
  <li data-target="#myCarousel" data-slide-to="0" class="active "></li>
  <li data-target="#myCarousel" data-slide-to="1" class=""></li>
  <li data-target="#myCarousel" data-slide-to="2" class=""></li>
</ol>