CSS诊断样式表

        当页面上的标记出了问题时，诊断样式表可以快速的给出视觉提示。在 http://meyerweb.com/eric/tools/css/diagnostics/diagnostic.css 可以看到一个诊断样式表的例子，还有一个类似的资源在. http://accessites.org/site/2006/07/big-red-angry-text/ 。诊断样式表的作用如下：

        例如下面的代码：

*[style], font, center {outline: 5px solid red;}

        它会把任何含有style属性的元素及任何字体元素和居中元素用一条红色的实线圈起来。你可以再给它加点佐料，比如 background-color:lime; ，进一步突显它。这样做是为了捕获那些有问题的标记出现的地方，无论这些标记是从内容管理系统还是其他什么地方引入的。

         验证并不是可以捕获任何标记问题。当我们使用了font元素的时候它会显示警告，但也会遇到一些验证器无法捕获的问题，比如 javascript 链接示例：

        <a href="#" onclick="javascript:nextPage();">Next</a>

        在这段代码下验证会一切正常，因为标记是正确的。问题是，对于不使用javascript的用户，这个链接什么也不能做。这里应该有个无脚本时的替代方案，并且应该提供一个可用的链接地址。因此，诊断样式表中还有一行代码

    a[href="#"] {background: lime;}

        这行代码会找出任何缺少无脚本后备链接地址的链接元素。

        至于样式表的使用，可以将它引入到正在开发的网站的CSS中并在网站上线时删除，也可以把它设置成浏览器中的用户样式表，这样可以在我们访问任何页面中使用。

        在 http://meyerweb.com/eric/tools/css/diagnostics/diagnostic.css 有个完整的链接样式表，它可以找出没有内容的空元素、没有 alt 或 title 属性或属性值为空的图像元素、找出没有摘要属性和表头含有无效范围值的表元素，含有有问题的或空的 title 和 href 属性值的链接元素等。但由于含有属性选择器，该版本无法在IE7中使用，而由于含有 :not() 和 :empty()伪类，该版本也无法在 IE8 中使用。