如何通过jQuery结合WordPress定制器修改已访问链接的颜色？

嘿，我懂你卡在这儿的点了——你之前用jQuery的.css()方法改链接颜色，但这个方法没法作用于:visited这种CSS伪类，因为伪类不属于DOM元素的直接样式属性。得换个方式，动态插入样式规则来搞定它！

修改后的代码 #

wp.customize('link_visited_color', function(value) {
    value.bind(function(to) {
        // 检查页面中是否已有我们专属的样式元素
        let styleElement = document.getElementById('custom-visited-link-style');
        
        // 如果没有，就创建一个并添加到<head>里
        if (!styleElement) {
            styleElement = document.createElement('style');
            styleElement.id = 'custom-visited-link-style';
            document.head.appendChild(styleElement);
        }
        
        // 更新样式内容，设置已访问链接的颜色
        styleElement.textContent = `a:visited { color: ${to} !important; }`;
    });
});

为什么这样能行？ #

• 伪类（比如:visited）是CSS层面的规则，没法通过操作DOM元素的内联样式来修改，必须通过添加全局样式规则才能生效。
• 我们创建了一个专属的<style>元素，每次颜色值变化时，都会更新这个元素里的样式内容，这样WordPress定制器的实时预览就能立刻看到效果。
• 加上!important是为了确保我们的样式能覆盖主题自带的已访问链接颜色（如果主题有设置的话），要是你的主题样式优先级不高，也可以去掉这个声明。

内容的提问来源于stack exchange，提问作者OctaviaLo