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

Question

我正在使用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会覆盖这个？

Answer 1

important标记的使用可能会让人感到困惑。

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

.a{
  color: black !important;
}

.b{
  color: red !important;
}

在你的超文本标记语言<div class="a b"></div>中有一个元素。您的<div>将始终具有类.b的color属性。这并不是因为b是您分配给div的最后一个类，而是因为在css文件中，.b类是在类.a之后定义的。因此，它不会像您预期的那样工作。元素的类的顺序是无关的，也就是css文件中类的定义顺序matter。

因此，尝试将覆盖类附加到CSS文件的末尾。

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

CSS important