Как снять правило стиля для одного элемента в Chrome DevTools?

Question

У меня есть такое правило CSS:

.blah-blah div

Это правило касается многих div с на странице. Когда я отменяю это правило для любого элемента в Chrome DevTools, я думаю, что оно «отключает» правило для всех элементов, к которым оно применяется. Есть ли способ отменить это правило только для текущего элемента?

Answer 1

Технический писатель DevTools здесь. Ты прав. Когда вы снимаете галочку с общего правила вроде этого:

p {
  margin-bottom: 1em;
}

Это отключит правило для всех p узлов.

Один из обходных путей - выбрать элемент в дереве DOM, а затем объявить новое правило в блоке element.style, которое отменяет любой стиль, который вы пытаетесь подавить.

Блок element.style эквивалентен добавлению встроенных стилей к HTML-элементу через атрибут style. Код на скриншоте выше соответствует этому:

<p style="margin-top: 48px; background-color: beige;">...</p>