【譯】我最喜歡的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…