bootstrap css类层次结构

Question

我想学习如何使用bootstrap元素构建我的css文件。当所有类都具有相同的类时，尝试选择一个独特的元素是非常棘手的，所以除了使用id之外我如何从像这样的结构中选择一个独特的元素？

   <div class="row">
      <div class="col-lg-12">
          <div class="row">
            <div class="col-md-2">CREATED</div>
            <div class="col-md-2">MODIFIED</div>
            <div class="col-md-2">USER STATUS</div>
            <div class="col-md-2">STATUS</div>
            <div class="col-md-2">MODEL</div>
          </div>
          <div class="row">
            <div class="col-md-2">26/02/2018</div>
            <div class="col-md-2">26/02/2018</div>
            <div class="col-md-2">quote requested</div>
            <div class="col-md-2">
              <select class="form-control"></select>
              <button class="btn btn-default">SAVE</button>
            </div>
            <div class="col-md-2">
              <button class="btn btn-default">DOWNLOAD FILE</button>
            </div>
            <div class="col-md-2">
              <button class="btn btn-default">SELECT</button>
            </div>
          </div>
      </div>
    </div>

假设我希望DOWNLOAD FILE按钮具有此属性：width：50％。如何在不给他身份的情况下选择该特定按钮？

Answer 1

解决方案1：

使用css选择器而不是ID。
示例：

.row .col-lg-12 .row:nth-child(2) .col-md-2:nth-child(5) button.btn.btn-default {
    width: 50%;
    background-color: red;
    color: #ffffff;
}

更多：W3School。

以下是关于Codepen的问题的解决方案（1）。

解决方案2：

为按钮使用自定义css类。
示例：

.btn-custom {
    width: 50%;
    background-color: red;
    color: #ffffff;
}

以下是Codepen上问题的解决方案（2）。

希望这会有所帮助。