如何为匹配指定文本的链接元素添加CSS样式（无需修改原代码）

现有以下HTML元素：

<p style="text-align: center;">
<b>List textlink</b>
<a class="link link--external has-favicon" href="#abc.com/abc" target="_blank" rel="noopener">ANONFILE</a> - 
<a class="link link--external has-favicon" href="#abc.com/xyz" target="_blank" rel="noopener">GOFILE</a> - 
<a class="link link--external has-favicon" href="#abc.com/123" target="_blank" rel="noopener">MEGA</a>
</p>

需要根据链接文本内容（ANONFILE、GOFILE、MEGA）为对应元素设置专属CSS样式：

• 文本为ANONFILE时，应用样式：

font-size: 9px;
color: red;
letter-spacing: 0.5px;

• 文本为GOFILE时，应用样式：

font-size: 10px;
color: yellow;
letter-spacing: 0.6px;

• 文本为MEGA时，应用样式：

font-size: 11px;
color: green;
letter-spacing: 0.7px;

目前已知的方法是遍历所有链接并检查文本内容，想问有没有无需修改原始HTML代码的更优实现方式？

无需改动原始HTML代码的话，有三种更高效的实现思路：

方案1：纯CSS（推荐，无JS依赖） #

利用CSS的:contains()选择器（现代主流浏览器均支持），直接根据文本内容匹配元素并绑定样式，完全不需要JS或修改HTML：

/* 匹配文本为ANONFILE的链接 */
.link:contains("ANONFILE") {
    font-size: 9px;
    color: red;
    letter-spacing: 0.5px;
}

/* 匹配文本为GOFILE的链接 */
.link:contains("GOFILE") {
    font-size: 10px;
    color: yellow;
    letter-spacing: 0.6px;
}

/* 匹配文本为MEGA的链接 */
.link:contains("MEGA") {
    font-size: 11px;
    color: green;
    letter-spacing: 0.7px;
}

方案2：JQuery（简洁高效） #

如果需要兼容不支持:contains()的旧浏览器，或者要扩展复杂逻辑，可以用JQuery的内置选择器，代码量远少于手动遍历：

// 为ANONFILE设置样式
$(".link:contains('ANONFILE')").css({
    "font-size": "9px",
    "color": "red",
    "letter-spacing": "0.5px"
});

// 为GOFILE设置样式
$(".link:contains('GOFILE')").css({
    "font-size": "10px",
    "color": "yellow",
    "letter-spacing": "0.6px"
});

// 为MEGA设置样式
$(".link:contains('MEGA')").css({
    "font-size": "11px",
    "color": "green",
    "letter-spacing": "0.7px"
});

方案3：原生JS（无框架依赖） #

不想用JQuery的话，原生JS也可以通过选择器简化逻辑，避免手动遍历检查文本：

// 定义文本与样式的映射表
const linkStyles = {
    "ANONFILE": {
        fontSize: "9px",
        color: "red",
        letterSpacing: "0.5px"
    },
    "GOFILE": {
        fontSize: "10px",
        color: "yellow",
        letterSpacing: "0.6px"
    },
    "MEGA": {
        fontSize: "11px",
        color: "green",
        letterSpacing: "0.7px"
    }
};

// 遍历映射表，匹配元素并批量设置样式
Object.entries(linkStyles).forEach(([text, styles]) => {
    document.querySelectorAll(`.link:contains('${text}')`).forEach(el => {
        Object.assign(el.style, styles);
    });
});

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