Блог

Я использую Bootstrap 5.0 CSS и пытаюсь создать таблицу с пользовательскими цветами ячеек, используя некоторые из моих собственных CSS. color Свойство работает нормально, но когда я пытаюсь изменить цвет фона с помощью background свойства, Bootstrap игнорирует правило. Кто-нибудь знает, как это исправить?

Мой код:

 td.colorfy {
    background: blue;
    color: white;
  } 

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-bordered">
  <tr>
    <td class="colorfy">cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table> 

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

 td.colorfy {
    background: blue !important;
    color: white;
  } 

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-bordered">
  <tr>
    <td class="colorfy">cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table> 

Или быть более конкретным при настройке вашего правила css:

 .table td.colorfy {
    background: blue;
    color: white;
  } 

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-bordered">
  <tr>
    <td class="colorfy">cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table> 

Как и в bootstrap css, цвет задается как:

 .table>:not(caption)>*>* {
    padding: .5rem .5rem;
    background-color: var(--bs-table-bg);
    border-bottom-width: 1px;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg)
}
 

и это более конкретно, чем ваше определение, оно выигрывает. Более конкретно, используя bootstrap или using !important , вы можете добиться нового цвета фона.