无法控制子元素CSS时，如何强制子span继承父元素字号？

DevOps 小满

2026-7-21

强制子字幕元素继承父元素字体样式的解决方案

问题核心

你能控制带有id="stays-the-same"的父span元素，但内部所有子span会随字幕更新重新生成，且每个子span都带有内联font-size样式，导致父元素设置的字体大小被覆盖，无法生效。

解决方法

要强制子元素继承父元素的字体样式，需要通过CSS选择器选中父元素下的所有子span，用!important覆盖它们的内联样式，强制继承父元素的属性。

关键CSS代码

#stays-the-same span {
    font-size: inherit !important;
}

#stays-the-same span：选中父元素下的所有子span（包括多层嵌套的）
font-size: inherit：让子元素继承父元素的字体大小
!important：优先级高于子元素的内联样式，确保覆盖生效

如果需要同时继承其他字体属性（比如字体、粗细），可以扩展代码：

#stays-the-same span {
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    /* 其他需要继承的属性 */
}

如何注入这段CSS

因为你无法直接修改网站代码，推荐用以下两种方式：

浏览器用户样式表：找到浏览器的用户样式表路径（比如Chrome的User StyleSheets文件夹），将上述CSS添加进去，针对目标网站生效。
油猴脚本（Tampermonkey）：
1. 安装Tampermonkey扩展
2. 新建脚本，替换为以下内容（修改@match后的URL为你观看影片的网站地址）：

// ==UserScript==
// @name         放大字幕字号
// @match        https://你的目标网站域名/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    const style = document.createElement('style');
    style.textContent = `
        #stays-the-same span {
            font-size: inherit !important;
        }
    `;
    document.head.appendChild(style);
})();