主要CSS覆盖属性

Question

我正在使用名为WebsiteBaker的CMS，现在我为它编写了一个模块，一个Droplet，它使用了它自己的CSS。 似乎主要CSS不能覆盖Droplet的CSS。

我认为这是因为Droplet（以及它，css）在其他所有内容之后被加载。 我不能只修改CMS文件作为解决方法，因为它是一个模块。

有关解决方法或类似内容的任何想法吗？

-

主要CSS（覆盖尝试，包含在标题中）

#programma_tab {
    width: 300px;
}

Droplet CSS示例（包含在正文中，没有其他办法）

#programma_tab {
    padding: 5px;
    font-size: 12px;
    margin-top: -15px;
    width: 200px;
}

Answer 1

我有几个想法。

1 - 尝试使选择器更具体。 body之类的内容应该覆盖原始

body #programma_tab {
    padding: 5px;
    font-size: 12px;
    margin-top: -15px;
    width: 200px;
}

2 - 尝试在任何CSS属性之后添加!important。

#programma_tab {
    padding: 5px !important;
    font-size: 12px !important;
    margin-top: -15px !important;
    width: 200px !important;
}

Answer 2

如果您使用的是DropletsExtension for WebsiteBaker，Droplet的CSS可以自动加载到模板的head部分，而且您不需要将CSS硬编码到正文中。

Answer 3

只需在CSS命令中添加!important语句，如：

#programma_tab {
    padding: 5px !important;
    font-size: 12px !important;
    margin-top: -15px !important;
    width: 200px !important;
}

我知道它当然不是最优雅的方式，但它有效。