Sphinx站点自定义CSS的!important属性未生效 无法覆盖扩展样式

问题原因 #

你自定义的样式是加在父级div的.white-font类上，color属性属于可继承属性，子元素p的颜色默认会继承父元素的设置。但扩展的CSS直接给p标签单独指定了color值，直接作用于元素本身的样式优先级永远高于从父元素继承来的样式，哪怕父元素的规则加了!important也不例外，这才导致你的自定义样式不生效。

解决方法 #

你可以任选以下任意一种方案实现需求：

• 调整自定义CSS的选择器范围，直接匹配父元素下的p标签，类选择器的优先级高于标签选择器，天然就能覆盖扩展的全局p样式：

.white-font p {
  color: rgb(255,255,255) !important;
}
/* 如果要同时保留父元素本身文字也为白色，可以写成 */
.white-font, .white-font p {
  color: rgb(255,255,255) !important;
}

• 写更精准的选择器，只匹配对应结构下的文本：

.card-header.white-font .card-text {
  color: #fff !important;
}

• 直接把white-font类添加到你要改色的p标签上，而不是加在父div上，让规则直接作用在目标元素本身。

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