【译】我最喜欢的CSS hack

有一个我已经复制粘贴5年的CSS片断：

* { 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); }
复制代码

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

2014年，我首次在Quora上分享了它（What are the most interesting HTML/JS/DOM/CSS hacks that most web developers don't know about?），如今，我天天仍然收到有人支持这个答案的通知。

那么，这个可怕的代码片断作了什么？

它意味着当你使用布局时适用，好比：

问题是，除非页面上的元素具备纯色背景或者一张图片，不然你看不到它是如何适合布局。例如大多数的文本节点，具备透明度的图片等。

应用上面的CSS，你会看到相似（下面）的东西：

不一样深度的节点使用不一样的颜色。容许你查看页面上每一个元素的大小，它们的边距和填充。如今，你能够容易地识别出不一致性。

参考和后话

• 原文：dev.to/gajus/my-fa…
• 文章首发：github.com/reng99/blog…
• 更多内容：github.com/reng99/blog…