Html 设置多个Jumbotron的样式-引导

我希望我的主页具有多个Jumbotron，但当我尝试在css.css文件中设置Jumbotron类的样式时，它们的样式将应用于每个Jumbotron。如果不使用内联css，如何在css文件中单独修改jumbotrons

我的css.css文件，jumbotron类。目前，这些更改应用于我主页上的两个Jumbotron，而我只想将下面的css应用于第一个

.jumbotron{
    width:100%;
    height: 1400px;
    background-color:#f39c12;
    padding:0px;
    margin:0px;
    opacity: 0.7;
    text-align: center;
}

我的主页。我希望这两个巨无霸是不同的

<div class="jumbotron">
    <div id="firstJBox">
    </div>
</div>
<div class="jumbotron">
</div>

---

为特殊性添加另一个类

<div class="jumbotron jumbotron-special">
    <div id="firstJBox">
    </div>
</div>
<div class="jumbotron">
</div>

---

演示：

为特殊性添加另一个类

<div class="jumbotron jumbotron-special">
    <div id="firstJBox">
    </div>
</div>
<div class="jumbotron">
</div>

---

演示：

类可以工作，但它们意味着可以重用。ID似乎更适合这种情况，因为它用于标识唯一的DOM对象，并且只能使用一次

类可以工作，但它们是可重用的。ID似乎更适合这种情况，因为它用于标识唯一的DOM对象，并且只能使用一次