首页 > 代码库 > html5自定义标签选择器
html5自定义标签选择器
* 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的，用扩展方法改变伪类的样式，实在厉害。
html5自定义标签选择器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。