嵌套div下::first-letter伪元素首字下沉的跨浏览器兼容问题

核心原因 #

这不是Firefox的bug，而是浏览器对CSS ::first-letter 伪元素规范的解读差异：

• 根据CSS规范，::first-letter 仅能匹配块级元素自身第一个子节点为文本节点的场景。如果容器的第一个子节点是其他块级元素（比如嵌套的<div>），规范并未要求浏览器穿透嵌套元素去匹配内层文本的首字母。
• Chrome和Safari实现了“扩展支持”，会自动穿透嵌套块级元素找到第一个有效文本节点；而Firefox严格遵循规范，仅检查当前元素的直接子节点，因此不会生效。

解决方案 #

由于你的场景是CMS，DOM结构不确定，提供两种适配方案：

方案1：纯CSS（兼容现代浏览器） #

使用CSS :has() 选择器（Firefox 121+原生支持，旧版本需开启layout.css.has-selector.enabled配置），同时匹配容器自身和其直接子块级元素的首字母：

/* 匹配容器自身有直接文本的情况 */
.first::first-letter {
    font-size: 100px;
}
/* 匹配容器第一个子元素是块级元素的情况 */
.first:has(> div) > div::first-letter {
    font-size: 100px;
}

若需覆盖更多嵌套层级，可扩展选择器（如.first:has(> div > div) > div > div::first-letter），但该方式对深层嵌套的灵活性有限。

方案2：JavaScript辅助（兼容所有目标浏览器） #

通过JS动态定位第一个包含有效文本的元素，为其添加专属类后，再用CSS设置首字样式：

// 遍历所有需要首字下沉的容器
document.querySelectorAll('.first').forEach(container => {
    let targetElement = null;

    // 递归查找第一个包含非空文本的元素
    function findFirstTextElement(el) {
        for (const child of el.childNodes) {
            // 检查文本节点是否非空
            if (child.nodeType === Node.TEXT_NODE && child.textContent.trim().length > 0) {
                return child.parentElement;
            }
            // 递归检查元素节点
            if (child.nodeType === Node.ELEMENT_NODE) {
                const result = findFirstTextElement(child);
                if (result) return result;
            }
        }
        return null;
    }

    targetElement = findFirstTextElement(container);
    if (targetElement) {
        targetElement.classList.add('first-letter-target');
    }
});

对应的CSS：

.first-letter-target::first-letter {
    font-size: 100px;
}

该方案不受DOM嵌套层级限制，能适配所有未知结构的场景。

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