css игнорируется браузером и devtools

Question

Используя Chrome и Firefox, по какой-то причине определенный css игнорируется. Также в devtools это не отображается как правило css.

Следующее показано с соответствующим цветом, с префиксом .e-rowcell или без него. Кроме того, при проверке этого элемента в dev tools -> styles я вижу соответствующий стиль css из моего файла.

.e-rowcell.received {
    color: #66DA26 !important;
  }

<div data-v-72a15e66="" class="e-rowcell received">blah blah</div>

Следующее показано с неверным цветом, для того же css выше , Это находится внутри ячейки таблицы / сетки. При проверке этого элемента в инструментах разработчика я не вижу его в списке.

<td class="e-rowcell received" role="gridcell" tabindex="-1" aria-label="$16.24 column header Feb" aria-colindex="2" index="7" style="text-align: center;">$16.24</td>

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

Другими словами, почему браузер игнорирует classB в следующем коде class="classA classB", даже если classB определен правильно? Спасибо

Answer 1

при использовании атрибута scoped в стиле компонента сгенерированные правила css также ссылаются на значение атрибута data-v и могут вызвать проблемы, если у вас есть css, который вы хотите применить для дочерних элементов компонент

вы можете удалить атрибут scoped или переместить стили в дочерний компонент, если это возможно