css - 在 Chrome DevTools 的元素样式中是否有切换“显示：无/块”的快捷方式？

Question

在 Chrome DevTools 中有一个显示/隐藏元素的快捷方式：

Chrome__web-inspector-hide-shortcut__为元素添加了类，但无非是visibility: hidden：

是否有类似的快捷方式来更改元素的display: none/block样式？所以点击它会添加style='display: none;'属性并切换它none/block？

Answer 1

没有这样的捷径。您可以做的是使用backspace从 DOM 中删除元素并使用cmd+z将其恢复。

Answer 2

尝试安装这个 chrome 扩展：

亲爱的。网络检查员隐藏快捷方式

它覆盖了默认的 css from "visibility: hidden"to"display: none"

虽然，我不是作者，但想法/实现很简单，请参阅源代码

几乎只需添加一个额外的 CSS 层

从

.__web-inspector-hide-shortcut__, .__web-inspector-hide-shortcut__ * {
    visibility: hidden !important;
}

至

.__web-inspector-hide-shortcut__ {
    display: none !important;
}

Answer 3

我们可以通过按一些键来隐藏元素。你可以这样做。

• 首先，在 Devtools 中单击要隐藏的 div。
• 然后在键盘上键入此“宽度”中的键。
• 现在该特定元素将被隐藏，您将看到它以 div 样式“ web-inspector-hide-shortcut ”编写

通过这样做，您的元素将隐藏，您无需对其应用“显示：无”。

请记住，此快捷方式是可逆的，并且要应用“显示：块”属性，只需在特定组件上执行相同操作即可。