为什么我的 CSS 在 Vimeo OTT 中被覆盖？答案

【问题标题】：Why is my CSS being overridden in Vimeo OTT?为什么我的 CSS 在 Vimeo OTT 中被覆盖？
【发布时间】：2021-01-16 19:30:45
【问题描述】：

我正在使用 CSS 自定义 Vimeo OTT 主题。我已经能够在整个主题中更改字体、颜色等 - 除了在视频播放器页面上。我的自定义字体正在显示，但文本颜色被覆盖。

我已尝试在我的代码中添加以下内容并包括 !important，但它仍然采用原始颜色并覆盖我的自定义设置。

#watch-info > div > div > div.row.margin-vertical-medium > div.column.small-16.medium-8.large-10 > div.contain.margin-top-large.column.small-16 > h1 { 
color: #000000 !important;
}

.site-font-primary-color, .site-font-primary-color strong {
    color: #000000 !important;
}

添加此代码后，当我检查要更改的元素时，我仍然看到以下内容：

.site-font-primary-color, .site-font-primary-color strong {
    color: #ffffff !important;
}

有什么我遗漏的吗？ Vimeo 是否有理由覆盖这一点？

【问题讨论】：

标签： css vimeo

【解决方案1】：

important 标签的使用可能会造成混淆。

假设您有两个类.a 和.b，这两个类都使用!important 标志设置color 属性。在您的 CSS 中，.b 是在 .a 之后定义的。

.a{
  color: black !important;
}

.b{
  color: red !important;
}

您的 HTML 中有一个元素 <div class="a b"></div>。您的<div> 将始终具有.b 类的color 属性。不是因为 b 是您分配给 div 的最后一个类，而是因为类 .b 是在您的 css 文件中在类 .a 之后定义的。所以它不像你预期的那样工作。元素类的顺序是无关的，你的css文件中类的定义顺序很重要。

所以尝试在 CSS 文件的末尾追加您的覆盖类。

看看我的代码笔。在那里您可以测试和切换类a 和b，例如从class="a b" 到class="b a" 或更改类定义的顺序。

CSS important

【讨论】：

嗯。我明白你在这里的意思，但我实际上将这两个元素添加为定位元素的不同方式 - 即使添加到我的 CSS 自定义的底部，两者都不起作用。在我看来，与您所指出的类似，我无法通过 Vimeo 覆盖我的自定义内容进行编辑？
您是否尝试在您的类中添加一些其他属性进行测试，例如.site-font-primary-color, .site-font-primary-color strong {color: #000000 !important; text-transform: uppercase;}。然后您可以使用开发人员工具并检查添加的属性是否也添加到元素中。也许还有另一条 css 行覆盖它。