A Handy CSS Debugging Snippet。刚刚看到的，想法很简单，代码很简洁，效果也不错，蛮有用（这种高级东东 IE 自然又是不认识的）。

  * { outline: 2px dotted red }

  * * { outline: 2px dotted green }

  * * * { outline: 2px dotted orange }

  * * * * { outline: 2px dotted blue }

  * * * * * { outline: 1px solid red }

  * * * * * * { outline: 1px solid green }

  * * * * * * * { outline: 1px solid orange }

  * * * * * * * * { outline: 1px solid blue }

很 容易理解，用不同颜色不同线型的 outline 来标注层级关系，还挺有韵律的，呵呵。作者说平常把这一大段扔在 css 文件的最前面，然后注释起来，debug 的时候把注释去掉。其实我的 firefox 已经装了好几个 css 相关的扩展了，以致于都分不清快捷键按出来 debug 的东西到底是哪个扩展的功能了。。。平常为了应急也用过类似的 debug 方法，定义一个.debug类，赋一个红色边框，想看哪个元素了就它在 html 中给加上这个类，不过这种直接利用全局选择符来描绘不同层级的元素倒是头回看到，蛮有创意的。