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); }

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

这个可怕的东西都做了什么?

这意味着会在布局的时候用到,如下。

未使用 CSS hack

问题是,除非页面的元素拥有一个实背景或者是图片,否则你无法看到他是如何在页面适配的。例如大部分文本节点、透明背景的图片等。

加上上面的 CSS 代码,你就会看到这些边线:

With CSS hack

不同深度的节点将会使用不同的颜色,允许你查看页面上每个元素的大小、边距和填充。现在你就可以很轻易地识别不一致性了。

本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://dev.to/gajus/my-favorite-css-hac...

译文地址:https://learnku.com/f2e/t/38216

本文为协同翻译文章,如您发现瑕疵请点击「改进」按钮提交优化建议
讨论数量: 1

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!