覆盖 CSS 媒体查询
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11425230/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Override CSS media queries
提问by Kevin Burke
I work with a page every day that uses CSS media queries I don't like; I'd rather use the full page (most of them are related to the Twitter Bootstrap menu collapsing when narrower than 768px).
我每天都在使用我不喜欢的 CSS 媒体查询的页面；我宁愿使用整页（其中大部分都与 Twitter Bootstrap 菜单在小于 768px 时折叠）有关。
Is there a way to override Bootstrap's media queries with CSS? Preferably without defining my own media queries to override all of the rules individually, as I feel like this would take a pretty long time.
有没有办法用 CSS 覆盖 Bootstrap 的媒体查询？最好不要定义我自己的媒体查询来单独覆盖所有规则，因为我觉得这需要很长时间。
Edit:I don't have control of the source code, otherwise I'd just kill the bootstrap-responsive code.
编辑：我无法控制源代码，否则我只会杀死引导响应的代码。
回答by FelipeAls
Why wouldn't you remove them in the first place?
为什么不首先删除它们？
If you can't, you still can override a CSS declaration with rules:
如果不能，您仍然可以使用规则覆盖 CSS 声明：
- that have the same selector priority and come afterthe MQ block
- that have higher selector prioritythan the rule in the MQ block
- that have
!importantbetween the value and the semi-colon
- 具有相同的选择器优先级并且在MQ 块之后
- 具有比 MQ 块中的规则更高的选择器优先级
- 具有
!important值和分号之间
/* one id, one class AND one element => higher priority */
#id element.class { property: value2; }
/* !important will nuke priorities. Same side effects as a nuke,
don't do that at home except if you've tried other methods */
#id .class { property: value2 !important; }
@media(blah) {
/* Overridden. Thrice. */
#id .class { property: value1; }
}
/* same selector, same everything except it comes after the one in @media?
Then the latter is applied.
Being in a @media doesn't give any more priority (but it won't be applied
everywhere, depending on "blah", that's the point of MQ) */
#id .class { property: value2; }
In the previous example, any of the declaration outside the @mediablock will override the one inside, e.g. there are 3 reasons why value2 will be applied and not value1.
在前面的例子中，@media块外的任何声明都将覆盖块内的声明，例如有 3 个原因为什么将应用 value2 而不是 value1。
回答by citykid
Would like to override bootstraps responsive.css too.
也想覆盖引导程序responsive.css。
I have half of the website where I want to use the default responsive.css while for another half one media query causes wrong layouts so I want to remove it.
我有一半的网站我想使用默认的responsive.css，而另一半媒体查询会导致错误的布局，所以我想删除它。
According to my research css does not allow to remove a media query.
根据我的研究，css 不允许删除媒体查询。
So I will go and copy responsive.css and remove the media query. If you have no access to the source, overrides might be the only choice.
所以我会去复制responsive.css并删除媒体查询。如果您无法访问源代码，则覆盖可能是唯一的选择。
