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

Question

我有这样的 CSS 规则:

.blah-blah div

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

Answer 1

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

p {
  margin-bottom: 1em;
}

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

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

element.style block 相当于通过 style 属性向元素的 HTML 添加内联样式。上面屏幕截图中的代码对应于此:

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