如何取消选中chrome DevTools中单个元素的样式规则？

Question

我有这样的CSS规则：

.blah-blah div

该规则在页面上命中了许多div。当我取消选中Chrome DevTools中任何元素的规则时，我认为它“禁用”了它适用于所有元素的规则。有什么方法只能取消选中当前所涉及元素的规则吗？

Answer 1

DevTools技术作家在这里。你是对的。当您取消选中这样的一般规则时：

p {
  margin-bottom: 1em;
}

它将为所有p节点禁用该规则。

一种解决方法是在DOM树中选择元素，然后在element.style块中声明一个新规则，以取消要抑制的任何样式。

element.style块等效于通过style属性向元素的HTML添加内联样式。上面的屏幕截图中的代码映射到此：

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