Html 覆盖特定宽度的媒体查询-CSS

我已经创建了一个响应Bartik的子主题，我需要在不触及原始主题的情况下缩小边栏的宽度：

原件：

@media all and (min-width: 851px) {
.
.
.
  #sidebar-first {
    width: 25%;
    margin-left: -100%; /* LTR */
  }
  #sidebar-second {
    width: 25%;
    margin-left: -25%; /* LTR */
    clear: none;
  }
.
.
.
}

name = Responsive Bartik Tiles
description = Tile based flexible, recolorable theme with many regions and a responsive, mobile-first layout.
version = VERSION
core = 7.x

stylesheets[all][] = css/layout.css
stylesheets[all][] = css/style.css
stylesheets[all][] = css/colors.css
stylesheets[print][] = css/print.css

scripts[] = js/collapsible-menu.js

regions[header] = Header
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom
regions[highlighted] = Highlighted

regions[featured] = Featured
regions[content] = Content
regions[sidebar_first] = Sidebar first
regions[sidebar_second] = Sidebar second

regions[triptych_first] = Triptych first
regions[triptych_middle] = Triptych middle
regions[triptych_last] = Triptych last

regions[footer_firstcolumn] = Footer first column
regions[footer_secondcolumn] = Footer second column
regions[footer_thirdcolumn] = Footer third column
regions[footer_fourthcolumn] = Footer fourth column
regions[footer] = Footer

settings[shortcut_module_link] = 0

; Information added by Drupal.org packaging script on 2014-10-15
version = "7.x-1.0"
core = "7.x"
project = "responsive_bartik_tiles"
datestamp = "1413392482"

子主题中的CSS：

/* Raj: To reduce the width of the sidebar: */
@media all and (min-width: 851px)
{
    #sidebar-first {
        width: 18% !important;
        margin-left: -92% !important; /* LTR */
    }
    #sidebar-second {
        width: 18%;
        margin-left: -32%; /* LTR */
        clear: none;
    }
}

令我惊讶的是，原来的CSS正在生效。除了媒体查询，我可以覆盖任何其他css属性。如果我将原始css文件本身的25%更改为18%，将-100%更改为-92%，我将得到所需的结果，但我无法确定如何在另一个css文件中覆盖这些值

我试着用谷歌搜索，但我得到的只是关于媒体查询的优先级，而不是关于覆盖

编辑： 我使用子主题的.info文件添加了新的CSS文件。下面是各自.info文件的内容。我按照drupal文档创建了子主题。然而，我并不觉得这在Drupal的体系结构中是一个问题，但是覆盖CSS媒体查询必须以不同的方式完成，这一结论的原因可能是因为custom.CSS文件中的任何其他CSS属性都是在被覆盖的媒体查询之外呈现的

原件：

@media all and (min-width: 851px) {
.
.
.
  #sidebar-first {
    width: 25%;
    margin-left: -100%; /* LTR */
  }
  #sidebar-second {
    width: 25%;
    margin-left: -25%; /* LTR */
    clear: none;
  }
.
.
.
}

name = Responsive Bartik Tiles
description = Tile based flexible, recolorable theme with many regions and a responsive, mobile-first layout.
version = VERSION
core = 7.x

stylesheets[all][] = css/layout.css
stylesheets[all][] = css/style.css
stylesheets[all][] = css/colors.css
stylesheets[print][] = css/print.css

scripts[] = js/collapsible-menu.js

regions[header] = Header
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom
regions[highlighted] = Highlighted

regions[featured] = Featured
regions[content] = Content
regions[sidebar_first] = Sidebar first
regions[sidebar_second] = Sidebar second

regions[triptych_first] = Triptych first
regions[triptych_middle] = Triptych middle
regions[triptych_last] = Triptych last

regions[footer_firstcolumn] = Footer first column
regions[footer_secondcolumn] = Footer second column
regions[footer_thirdcolumn] = Footer third column
regions[footer_fourthcolumn] = Footer fourth column
regions[footer] = Footer

settings[shortcut_module_link] = 0

; Information added by Drupal.org packaging script on 2014-10-15
version = "7.x-1.0"
core = "7.x"
project = "responsive_bartik_tiles"
datestamp = "1413392482"

次主题：

name = Indian Snakes Responsive Bartik Tiles
description = Indian Snakes Tile based flexible, recolorable theme with many regions and a responsive, mobile-first layout.
version = VERSION
core = 7.x

base theme = responsive_bartik_tiles

stylesheets[all][] = css/layout.css
stylesheets[all][] = css/style.css
stylesheets[all][] = css/colors.css
stylesheets[print][] = css/print.css
stylesheets[all][] = css/custom.css

scripts[] = js/collapsible-menu.js

regions[header] = Header
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom
regions[highlighted] = Highlighted

regions[featured] = Featured
regions[content] = Content
regions[sidebar_first] = Sidebar first
regions[sidebar_second] = Sidebar second

regions[triptych_first] = Triptych first
regions[triptych_middle] = Triptych middle
regions[triptych_last] = Triptych last

regions[footer_firstcolumn] = Footer first column
regions[footer_secondcolumn] = Footer second column
regions[footer_thirdcolumn] = Footer third column
regions[footer_fourthcolumn] = Footer fourth column
regions[footer] = Footer

settings[shortcut_module_link] = 0

; Information added by Drupal.org packaging script on 2014-10-15
version = "7.x-1.0"
core = "7.x"
project = "responsive_bartik_tiles"
datestamp = "1413392482"

唯一的区别是增加了行-

stylesheets[all][] = css/custom.css

在子主题的.info文件中

如果您是通过drupal\u add\u css添加此css

drupal\u添加\u css( “/path/to/css.css”， 排列( “重量”=>“9999”， ) );

保持css文件与父主题完全相同

如果问题仍然存在，请禁用CSS缓存-清除缓存并再次检查

另一个选项 查看您是否在sub-theme的.info文件或各种import语句中准确地提到了sub-theme路径

---

我的错！有一个额外的“；”在媒体查询的开头。因此，仅未执行媒体查询覆盖。显然是一个额外的“；”我猜这可能意味着css的结束，不知道为什么css的其余部分从未被考虑过

有一个技巧，可以用于这种重写

例如，您有一个基本主题，在子主题的

.info

文件中有一个文件

base/css/donotwant.css

，您必须指定

stylesheets[all][]=donotwant.css

，它将被神奇地排除

---

之后，您可以在子主题中以您想要的方式对样式进行编码

尝试在head标签中添加CSS代码

/*Raj:以减小侧边栏的宽度：*/@media all和（最小宽度：851px）.

这意味着您的子主题的CSS媒体查询是在父主题的CSS之前加载的。我编辑了这个问题，CSS文件是使用子主题的.info文件添加的。在测试之前，我尝试过清除缓存。请查看是否有其他可选选项。我本想覆盖特定的类/ID。虽然您的解决方案很好，但这将完全放弃父主题的css。不过还是要谢谢你的把戏：）