用CSS检查HTML代码

原文地址

实现思路：就是利用 CSS 选择器来定位到不符合规范的元素，并以醒目的样式进行提醒。

具体例子：

/*定位有style属性的元素*/
*[style] { 
    border: 5px solid red;
}

/*检查a标签的href属性，不能为【空 / # / javascript:void(0)】 */
a:not([href]), a[href="#"], a[href=""], a[href*="javascript:void(0)"] { 
    border: 5px solid red;
}  

/*img标签不能没有alt属性*/
img:not([alt]) {
    border: 5px solid red;
}  

联想—“一句话学点JS”：

[].forEach.call($$("*"),function(a){
  a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})

$$是Chrome浏览器的querySelectorAll()或者getElementByTagName。。
1<<24是通过位运算的到2的24次幂。配合random得到1到2的24次幂的随机数。。
通过~~两次取反得到整数部分。再变成16进制字符串表示颜色。。
整体意思就是获取页面上当前所有元素，并给他们加一个随机颜色的边框。
详细解释可见链接

大开脑洞：

/*input标签readonly属性不能为false或"false"或空*/
input[readonly="false"], input[readonly=""], input[readonly=false] { 
    border: 5px solid red;
}  

/*img标签url属性不能为空*/
img:not([url]),img[url="#"],img[url=""] {
    border: 5px solid red;
}  

未完待续，欢迎补充。。