重写媒体查询特定宽度 - CSS

Question

我创建响应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; 
    } 
. 
. 
. 
} 

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 Media查询可能需要以不同的方式完成，这个结论的原因是因为custom.css文件中的任何其他css属性都呈现为重写媒体查询。

原文：

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文件

。

Answer 1

我的不好！还有一个';'在媒体查询的开始处。由于这只有媒体查询覆盖没有被执行。显然是一个额外的';'可能会意味着我猜的CSS结束，不知道为什么其余的CSS从来没有考虑过！

Answer 2

1. 如果通过drupal_add_css添加此CSS

   drupal_add_css（ '/path/to/css.css'， 阵列（ '体重'=> '9999'， ） ）;

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

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

4. 另一个选项 看看你究竟在分主题的的.info文件中或在各种进口语句提子主题路径。

Answer 3

有一个技巧，你可以使用这种覆盖。

例如，你有一个基本主题，文件base/css/donotwant.css，在你的孩子主题的.info文件中，你必须指定stylesheets[all][] = donotwant.css，它会被魔法排除在外。

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