一段神奇的CSS样式

分享 :
标签: 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属性,在布局中会很方便的区分。

文章分类