html5自定义标签选择器

浏览数：24 / 时间：2015年06月09日

* 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>