【已解决】CSS 代码片段修改：双链样式

想对下面的这个 CSS 代码片段进行修改

已有一个代码片段如下，可以使思源笔记中的双链样式自动转换为带有 [[ 和 ]] 的经典样式，如下：

.cssapp-translate-config-button.protyle-wysiwyg [data-node-id] span[data-type='block-ref'] {
    color: var(--b3-theme-primary)!important;
    font-weight: inherit;
    background-color:transparent!important;
    border-bottom:none!important;
}

/* 为引用块后面增加引用图标 */
.protyle-wysiwyg [data-node-id] span[data-type="block-ref"]::before {
    color: var(--b3-theme-on-surface)!important;
    content: "[["!important;
}

.protyle-wysiwyg [data-node-id] span[data-type="block-ref"]::after {
    color: var(--b3-theme-on-surface)!important;
    content: "]]"!important;
}

.protyle-wysiwyg [data-node-id] span[data-type="block-ref"]:hover {
    background-color: var(--b3-theme-primary-lightest)!important;
}

然而在为双链中的字体添加加粗、斜体、删除线、下划线等样式后，双链又变回思源原来的样式，如下。请问各位大佬，怎么修改上面这段 CSS，使得该经典双链样式不受到字体样式改变的影响呢？

例如将双链中字体加粗后，仍保持带双括号的经典双链样式