通过DOM添加的含斜杠/的span元素无法应用bold类样式求助

我有一个名为editorPathDisplay的div元素，用来展示路径（比如root/something/anotherthing），想把其中的/字符加粗来区分层级。我用span拆分路径：第一个span放“root”无类，下一个span放“/”并加bold类，以此类推。

现在遇到的问题是：bold类在普通文本的span上能生效，但只包含斜杠/的span完全没效果。换过类名、调整样式都没用，程序生成的纯斜杠span就是不应用类样式。页面结构显示正常，以下是我的JS代码和结果说明：

代码片段 #

var pathDisplay = document.getElementById("editorPathDisplay");
// pathDisplay.innerHtml = "";
pathDisplay.textContent = "PATH: ";
var path = selectedObj.dataset.path;

var pathList = path.split("/");

for (var i = 0; i < pathList.length; i++) {
    var unformatedSpanInsert = document.createElement("span");
    unformatedSpanInsert.textContent = pathList[i]
    pathDisplay.appendChild(unformatedSpanInsert);

    if (i < pathList.length - 1) {
        var spanInsert = document.createElement("span");
        spanInsert.classList.add("bold");
        spanInsert.textContent = "/"; // <- 这是Result 1和Result 2的唯一区别
        pathDisplay.appendChild(spanInsert);
    }
}

结果说明 #

Result 1（span内容设为非斜杠时） #

• 页面显示：目标内容正常加粗
• 元素结构：带bold类的span样式标记生效

Result 2（span内容设为/时） #

• 页面显示：斜杠无加粗效果
• 元素结构：span确实带有bold类，但样式未生效

问题原因 #

1. 字体特性限制：部分字体中，斜杠/的加粗效果本身极不明显，肉眼几乎无法区分，容易误以为样式未生效。
2. 样式优先级冲突：全局样式中可能存在优先级更高的规则（比如span { font-weight: normal !important; }），覆盖了bold类的加粗属性。

解决方法 #

方法1：强制提升样式优先级 #

修改bold类的CSS，确保优先级足够覆盖其他规则：

.bold {
    font-weight: 900 !important; /* 用更高字重，或加!important强制生效 */
    /* 可选：添加颜色/字号辅助区分 */
    color: #333;
    font-size: 1.1em;
}

方法2：优化视觉区分度 #

如果字体斜杠加粗效果确实不明显，可通过额外样式增强层级感：

.bold {
    font-weight: bold;
    margin: 0 4px; /* 增加左右间距 */
    font-size: 1.2em; /* 放大字号 */
}

方法3：简化实现（更优方案） #

无需拆分多个span，用正则直接替换路径中的/为带类的span，代码更简洁：

var pathDisplay = document.getElementById("editorPathDisplay");
var path = selectedObj.dataset.path;

// 若路径存在XSS风险，先转义HTML特殊字符
function escapeHtml(text) {
    return text.replace(/[&<>"']/g, match => ({
        '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;'
    }[match]));
}

var safePath = escapeHtml(path);
pathDisplay.innerHTML = `PATH: ${safePath.replace(/\//g, '<span class="bold">/</span>')}`;

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