ТД класс не меняется, не вступает в силу

Question

Так что у меня тд с переключателем.У меня есть следующая разметка:

.create-agreement-radio {
  padding-top: 20px;
}

.create-agreement-radio td {
  padding-top: 20px;
}

table .create-agreement-radio {
  padding-top: 20px;
}

<td class="text-center create-agreement-radio">
  <span class="radio-custom radio-primary" data-lastselected="0" data-bind="event: { click: function(data, event) { $root.contractRadioClick(data, event, this) } }">
<input type="radio" name="contractSelectRadio" data-bind=" attr: { id: 'contractSelected' + $index() }">
<label data-bind="attr: { 'for': 'contractSelected' + $index() }"></label>
</span>
</td>

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

Answer 1

Чтобы переопределить theme.css, мне нужно было добавить ID в мой класс, чтобы он теперь выглядел так: <td class="text-center" id="create-agreement-radio">

Answer 2

Вы можете посмотреть на это, я окружил вас td тегом table, а затем удалил артерию * из create-agreement-radio.Все отлично работает.

.create-agreement-radio {
  padding-top: 20px;
}

.create-agreement-radio td {
  padding-top: 20px;
}

table .create-agreement-radio {
  padding-top: 60px;
}

<table>
<td class="text-center create-agreement-radio">
  <span class="radio-custom radio-primary" data-lastselected="0" data-bind="event: { click: function(data, event) { $root.contractRadioClick(data, event, this) } }">
<input type="radio" name="contractSelectRadio" data-bind=" attr: { id: 'contractSelected' + $index() }">
<label data-bind="attr: { 'for': 'contractSelected' + $index() }"></label>
</span>
</td>
</table>