当内置颜色和布局选项无法满足需求时，使用自定义 CSS 覆盖音频播放器样式。适用于内嵌播放器和固定底栏两种形式。
在哪里添加自定义 CSS
主题级别（推荐）
使用主题自定义工具：
- 外观 → 自定义 → 附加 CSS
- 粘贴您的规则
- 发布
此方式在主题更新和子主题切换后仍然有效。
插件级别
在 文字转语音 → 高级 → 自定义 CSS 中，粘贴仅在含有播放器的页面加载的 CSS。适合需要与插件绑定的专属样式。
可定位的播放器元素
播放器中的每个元素都有稳定的类名。常用选择器：
/* 播放器整体容器 */
.mementor-tts-player { }
/* 播放按钮 */
.mementor-tts-play-button { }
/* 进度条（线性） */
.mementor-tts-progress { }
/* 波形条（PRO） */
.mementor-tts-waveform-bar { }
/* 时间显示 */
.mementor-tts-time { }
/* 速度选择器 */
.mementor-tts-speed { }
/* 音量滑块 */
.mementor-tts-volume { }
/* 下载链接 */
.mementor-tts-download { }
/* 固定底栏（PRO） */
.mementor-tts-sticky-footer { }
使用浏览器检查器浏览完整的 HTML 树，精确找到您想定位的元素。
常见示例
匹配主题的圆角
.mementor-tts-player {
border-radius: 12px;
}
隐藏特定控件
.mementor-tts-loop {
display: none !important;
}
优先使用插件的 UI 设置，仅在缺少对应设置时才用 CSS 覆盖。
放大播放按钮
.mementor-tts-play-button {
width: 56px;
height: 56px;
}
为固定底栏添加自定义阴影
.mementor-tts-sticky-footer {
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
}
自定义字体
.mementor-tts-player {
font-family: "Your Theme Font", sans-serif;
}
.mementor-tts-time {
font-variant-numeric: tabular-nums;
}
CSS 变量
播放器提供可覆盖的 CSS 自定义属性：
.mementor-tts-player {
--player-bg-color: #your-color;
--player-text-color: #your-color;
--player-play-color: #your-color;
}
这是重新设置颜色最简洁的方式，无需覆盖具体规则。
选择器优先级注意事项
TTSWP 的默认 CSS 使用 html body .mementor-tts-* 选择器来覆盖主题样式。若要从主题端覆盖，需匹配或超过此优先级：
html body .mementor-tts-player {
background: #000;
}
或谨慎使用 !important。
用浏览器检查器测试
添加自定义 CSS 后：
- 在前台打开任意含音频的文章。
- 右键点击播放器 → 检查。
- 查看 Computed 面板，确认哪条规则生效。