css - 主要 CSS 覆盖属性

Question

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

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

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

--

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

#programma_tab {
    width: 300px;
}

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

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

score 2 · Accepted Answer

我有几个想法。

1 - 尝试使选择器更具体。类似的东西body应该覆盖原来的

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

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

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

score 1 · Accepted Answer

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

score 0 · Accepted Answer

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

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

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

3 回答 3