标签：
* E[attr]：只使用属性名，但没有确定任何属性值
* E[attr="value"]：指定属性名，并指定了该属性的属性值。必须和元素的属性完全匹配
* E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“?”不能不写
* E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的
* E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的，与E[attr^="value"]相反
* E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value
* E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）
document.querySelector("[data-klass=‘ppss‘]");
高端人士甚至连伪类也玩弄于鼓掌之中了：
<!DOCTYPE html> <title>CSS</title> <style> body { font: 200%/1.45 charter; } ref::before { content: ‘\00A7‘; letter-spacing: .1em; } </style> <article>The seller can, under Business Law <ref>1782</ref>, offer a full refund to buyers. </article> <script> function ruleSelector(selector) { function uni(selector) { return selector.replace(/::/g, ‘:‘) } return Array.prototype.filter.call(Array.prototype.concat.apply([], Array.prototype.map.call(document.styleSheets, function(x) { return Array.prototype.slice.call(x.cssRules); })), function(x) { return uni(x.selectorText) === uni(selector); }); } var toggle = false, pseudo = ruleSelector("ref::before").slice(-1); document.querySelector("article").onclick = function() { pseudo.forEach(function(rule) { if (toggle = !toggle) rule.style.color = "red"; else rule.style.color = "black"; }); } </script>
一般来说是没办法选中:after的，用扩展方法改变伪类的样式，实在厉害。
标签：
原文地址：http://www.cnblogs.com/haimingpro/p/4206279.html
