一段神奇的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); }

这段代码是干吗用的呢？

显示节点的层次结构。比如说：当前这个页面刚开始是这样子的：

添加了代码后，是这样子的：

不同颜色代表不同层次，还会直观的显示出 margin和padding属性，在布局中会很方便的区分。