CSS生效时HTML <font>标签失效的解决方案咨询

问题根源 #

全局*选择器的样式优先级高于<font>标签的原生属性，即使设置了unset，元素会继承父级样式而非使用标签自带的color/size属性值。

方案1：使用CSS属性选择器 + attr()函数 #

利用属性选择器的优先级高于通用选择器的特性，直接读取<font>标签的属性值应用到CSS样式上：

/* I cannot change these values... */
*
{
    color: blue;
    font-size: 10px;
}

/* I can change these values */
*
{
    color: unset;
    font-size: unset;
}

/* 新增：针对font标签的属性设置 */
font[color] {
    color: attr(color);
}

font[size] {
    font-size: attr(size);
}

• font[color]和font[size]的优先级高于*选择器，会覆盖之前的unset样式
• attr()函数直接读取标签的对应属性值，完美匹配预期效果
• 若<font>的size使用传统1-7的数值（而非px单位），可额外调整逻辑，比如通过calc()转换为具体像素值，但你的场景中用px单位直接用attr(size)即可。

方案2：JavaScript设置行内样式（兼容性更强） #

如果需要兼容对attr()支持有限的旧浏览器，可通过JS遍历<font>标签，手动设置行内样式（行内样式优先级最高，必然覆盖全局CSS）：

// 页面加载后执行，或在可编辑div内容变化后执行
document.querySelectorAll('font').forEach(fontEl => {
    const color = fontEl.getAttribute('color');
    if (color) {
        fontEl.style.color = color;
    }
    
    const size = fontEl.getAttribute('size');
    if (size) {
        fontEl.style.fontSize = size;
    }
});

• 可将这段代码绑定到可编辑div的input事件上，确保每次内容变化后都能生效
• 无需担心CSS优先级问题，行内style属性的优先级远高于全局选择器

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