Question

我正在使用快速创意邻居主题的Wordpress，它运行在swift和twitter bootstrap框架上。

要更改主题的某些样式，我还使用了一个子主题，现在它只有一个style.css，并且对某些部分工作正常。但是，我现在想要为不同的屏幕尺寸更改一些bootstrap响应式样式，但这不起作用。

我的问题是，母主题的responsive.css总是超过了不同屏幕尺寸的儿童主题的样式。

在这里，我将向您展示我想要改变的内容。首先，我加载了两个不同的母语主题的.css文件，如下所示

@import url("../neighborhood/style.css");
@import url("../neighborhood/css/responsive.css");

接下来，这是我想改变的主题风格：

@media only screen and (min-width: 1200px) {
(...)
body.woocommerce .has-no-sidebar ul.products li.product, body.woocommerce .has-no-sidebar .upsells.products ul.products li.product {
      width: 270px;
}
(...)
}

在我的孩子主题style.css中我改变了这一行：

@media only screen and (min-width: 1200px) {
    body.woocommerce .has-no-sidebar ul.products li.product, body.woocommerce .has-no-sidebar .upsells.products ul.products li.product {
        width: 31%;
    }
}

对我来说，这看起来很不错，但我妈妈主题的responsive.css的风格总是超过我的孩子主题的代码。我在哪里弄错了？

提前致谢，我真的很感谢你的帮助！

Answer 1

尝试使用！important扩展，如果这不起作用，也许wordpress会在某处覆盖你的文件，你是否将样式表插入标题模块？ -

Answer 2

我遇到了同样的问题。 responsive.css覆盖子主题css。在我的情况下使用！important似乎失败了因为responsive.css已经在使用！important：

// Code from responsive.css
#main-navigation {
  display: none;
  float: none;
  margin: 10px 20px 30px!important;
}

wordpress儿童主题css风格克服了

2 个答案: