Bootstrap 3.3.5 - Изменение цвета фона строки таблицы для класса «Информация» на одной странице

Question

Я пытаюсь изменить цвет фона для строк таблицы, которым назначен класс информации по умолчанию на одной странице.Я добавил следующий CSS:

.table tbody>tr.info {
  background-color: #24e5d2 !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table class="table table-bordered">
  <tr>
    <td>Definition</td>
  </tr>
  <tr class="info">
    <td>Lorem Ipsum</td>
  </tr>
</table>

, но цвет строки таблицы не меняется с синего оттенка по умолчанию для информационного класса, а не нового пользовательского цвета.

Answer 1

Попробуйте, это изменится:

.table tbody>tr.info td{
  background-color: #24e5d2 !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table class="table table-bordered">
  <tr>
    <td>Definition</td>
  </tr>
  <tr class="info">
    <td>Lorem Ipsum</td>
  </tr>
</table>

Answer 2

Если возможно, вместо использования длинной иерархии .table tbody>tr.info td используйте пользовательский класс .table .info.custom-info-bg td.

.table .info.custom-info-bg td {
  background: #f1f1f1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<table class="table table-bordered">
  <tr>
    <td>Definition</td>
  </tr>
  <tr class="info custom-info-bg">
    <td>Lorem Ipsum</td>
  </tr>
</table>