我如何使用具有不同样式的多个轮播

Question

我想使用轮播的多个实例。为此，每个人都有完整的样式。

我该如何以最简单的方式使其（css类）分离样式，并确保只有这种样式才能在单个轮播中使用？

我尝试用这种方式制作，但是失败了

/*first carousel*/
.firstc.carousel {
    width: 650px;
    margin: 0 auto;
    padding-bottom: 50px;
}
.firstc.carousel.item {
    color: #999;
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    min-height: 340px;
}
.firstc.carousel.item a {
    color: #eb7245;
}
.firstc.carousel.img-box {...

/*second carousel*/
.secondc.carousel {
    width: 650px;
    margin: 0 auto;
    padding-bottom: 50px;
}
.secondc.carousel.item {
    color: #999;
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    min-height: 340px;
}
.secondc.carousel.item a {
    color: #eb7245;
}
.secondc.carousel.img-box {...

这里是解释html的一小部分

<div class="container">
  <div class="row">       
    <div class="col-md-12 firstc">
      <h2>first carousel</h2>
      <div id="myCarousel" class="firstc carousel slide" data-ride="carousel">

        <ol class="firstc carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>   
        <div class="firstc carousel-inner">     
          <div class="firstc item carousel-item active">
....

and the second
<div class="container">
  <div class="row">       
    <div class="col-md-12 secondc">
      <h2>secondc carousel</h2>
      <div id="myCarousel" class="secondc carousel slide" data-ride="carousel">

        <ol class="secondc carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>   
        <div class="secondc carousel-inner">        
          <div class="secondc item carousel-item active">
....