版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/AkashaicRecorder/article/details/52992948
声明：此方法由bumfod 同学提供
【HTML部分】
<!DOCTYPE html>
<title>CSS</title>
<article>The seller can, under Business Law <ref>1782</ref>, offer a full refund to buyers. </article>【CSS部分】
body {
font: 200%/1.45 charter;
}
ref::before {
content: '\00A7';
letter-spacing: .1em;
}【JavaScript部分】
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";
});
}最终，你在页面上看到这句话的时候
The seller can, under Business Law 1782, offer a full refund to buyers.
就会出现以下效果：
点击前：
点击后：
总结：
这是一种相当hack的方法，适合高逼格青年。遍历了所有的css，找到伪元素，然后更改
下篇我们再来说一说普通青年的做法