在 Chrome 中编辑 CSS 规则时不要突出显示 HTML 区域

Posted 2023-03-06

【中文标题】在 Chrome 中编辑 CSS 规则时不要突出显示 HTML 区域

【英文标题】：Don't highlight HTML areas on editing CSS rules in Chrome

【发布时间】：2019-08-27 12:20:02

【问题描述】：

在最新的 Chrome 版本中，我们有一些强大的 CSS 工具来使用按钮创建规则，并在检查器中编辑任何规则时突出显示每个受影响的区域，这非常有用，但设计网站也有些烦人。

如果我正在编辑像 padding 或 margin 这样的规则，它会在元素周围显示一个绿色或橙色区域，对我来说很难说这个彩色区域的边界在哪里，我更喜欢看到“真实”的结果。

在下图中，我正在编辑填充，但看不到边框。

如果我想将边框颜色编辑为不同的颜色，线条颜色变成橙色，那么我看不到我正在改变的颜色。

在下图中，我将边框颜色更改为灰色，如您所见，它显示的是橙色边框。

如何禁用/关闭此功能？

谷歌浏览器版本 73.0.3683.86

【问题讨论】：

恐怕你不能在不编译自己的 Chromium 版本的情况下更改/关闭此功能，我认为这不是一个好主意。从 FE 的角度来看，问题是你为什么要关心这个？无论物业的颜色是什么，您都可以安全地遵循您拥有的布局中的设计指南/规范，仅此而已。老实说，有时出于调试目的，这可能会困扰我，但这没什么大不了的，只要结果达到，您可以选择另一种颜色进行测试并稍后用合适的颜色替换它。

@starmin 你能提供代码或小提琴链接吗？

【参考方案1】：

您使用的是旧版本，此问题已在较新版本中得到修复。 Chrome Version 74.0.3729.169 和 Canary Version 77.0.3812.0。

更新 chrome 后，如果您仍然遇到此问题，这里是解决方法。

将鼠标悬停在 DOM 树中的选定元素上。

---

没有鼠标悬停在 DOM 树中的选定元素上。

---

您只需要从元素选择中移除悬停。

【讨论】：

你完全正确，更新我的 chrome 解决了这个问题。

【参考方案2】：

<div unselectable="on">Test Text</div>

这是我能为你找到的，它可能对你有用。 全文在这里：How to stop highlighting of a div element when double-clicking