我最喜欢的 CSS hack

有一个 CSS 代码片段我已经复制粘贴了 5 年了：

* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
* * * * * * * { background-color: rgba(255,0,0,.2); }
* * * * * * * * { background-color: rgba(0,255,0,.2); }
* * * * * * * * * { background-color: rgba(0,0,255,.2); }

^ 这是我最喜欢的发明之一。

更新于2020年10月。此后，我采用了一些更详细的代码片段：

* { outline: 1px solid rgba(255,0,0,.2); :hover { outline: 1px solid rgba(255,0,0,0.6); } }
* * { outline: 1px solid rgba(0,255,0,.2); :hover { outline: 1px solid rgba(0,255,0,0.6); } }
* * * { outline: 1px solid rgba(0,0,255,.2); :hover { outline: 1px solid rgba(0,0,255,0.6); } }
* * * * { outline: 1px solid rgba(255,0,255,.2); :hover { outline: 1px solid rgba(255,0,0,0.6); } }
* * * * * { outline: 1px solid rgba(0,255,255,.2); :hover { outline: 1px solid rgba(0,255,0,0.6); } }
* * * * * * { outline: 1px solid rgba(255,255,0,.2); :hover { outline: 1px solid rgba(0,0,255,0.6); } }
* * * * * * * { outline: 1px solid rgba(255,0,0,.2); :hover { outline: 1px solid rgba(255,0,0,0.6); } }
* * * * * * * * { outline: 1px solid rgba(0,255,0,.2); :hover { outline: 1px solid rgba(0,255,0,0.6); } }
* * * * * * * * * { outline: 1px solid rgba(0,0,255,.2); :hover { outline: 1px solid rgba(0,0,255,0.6); } }

我第一次在 2014 年在 Quora 上分享它（大多数 Web 开发人员不知道的最有趣的 HTML/JS/DOM/CSS 技巧是什么？），至今我每天仍会收到有人点赞这个答案的通知。

但这个可怕的东西会做什么呢？

它适用于布局工作，例如

问题在于，除非页面上的元素具有纯色背景或图片，否则您看不到它如何适应布局，例如大多数文本节点、具有透明度的图片等。

应用上述 CSS 后，您将看到类似以下内容的内容：

不同深度的节点将使用不同的颜色，让您能够清晰地查看页面上每个元素的大小、边距和填充。现在，您可以轻松识别不一致之处。

文章来源：https://dev.to/gajus/my-favorite-css-hack-32g3