CSS 媒体查询样式不覆盖原始样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19038240/
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
Media Query Styles Not Overriding Original Styles
提问by Ben Black
I'm attempting to use some media queries for a website I'm building. The problem I'm having however, is while the media query styles are actually being applied, they're being overridden. I can't for the life of me tell why because I'm using the same exact selectors. Can anyone point out something that I'm not seeing?
我正在尝试对我正在构建的网站使用一些媒体查询。然而，我遇到的问题是，在实际应用媒体查询样式时，它们被覆盖了。我一生都无法说出原因，因为我使用的是完全相同的选择器。谁能指出一些我没有看到的东西？
ORIGINAL CSS
原始 CSS
#global-wrapper-outer > #global-wrapper-inner {
width: 85%;
height: 100%;
margin: 0 auto;
position: relative;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
background: #fff;
padding-bottom: 20px;
box-shadow: 0 4px 2px -2px gray;
}
MEDIA QUERY CSS
媒体查询 CSS
@media screen and (max-width:1024px) {
#global-wrapper-outer > #global-wrapper-inner {
width: 100%;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
display: none;
}
}
The second media query is working fine, where I set the nav to have a display of none. However, when I try to set the width of #global-wrapper-inner to 100% it doesn't apply. I can see the style being "applied" when I press F12 and select that element. However, the style itself is crossed out and not actuallyapplied and it still has the original width of 85%.
第二个媒体查询工作正常，我将导航设置为无显示。但是，当我尝试将 #global-wrapper-inner 的宽度设置为 100% 时，它不适用。当我按 F12 并选择该元素时，我可以看到正在“应用”样式。但是，样式本身被划掉并没有实际应用，它仍然具有 85% 的原始宽度。
回答by adrift
The selectors in your original CSS have the same specificityas the selectors within your media queries (the first declarations are also targeting the same property - width) and because the media query rule set is being overridden I'm going to assume that it appears beforethe original rule set.
在你原来的CSS选择器具有相同的特异性，为您的媒体查询中的选择（第声明也瞄准了相同的属性- width），也因为媒体查询规则集是被重写，我会认为它出现之前的原始规则集。
The second media query selector works because it's targeting a property that wasn't set in your original CSS, so specificity isn't relevant.
第二个媒体查询选择器有效，因为它针对的是未在原始 CSS 中设置的属性，因此特异性无关紧要。
To have the first media query selector take precedence, prepend an ancestor element to it:
要使第一个媒体查询选择器优先，请在其前面添加一个祖先元素：
@media screen and (max-width:1024px) {
body #global-wrapper-outer > #global-wrapper-inner {
width: 100%;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
display: none;
}
}
回答by Sameer Khanal
You need to link the media query file (queries.css) later than the normal css file (style.css). That way the rules in the queries.css will override those in style.css.
您需要在普通 css 文件（style.css）之后链接媒体查询文件（queries.css）。这样，querys.css 中的规则将覆盖 style.css 中的规则。
回答by gtamborero
I have been at least 2 hours trying to find the override CSS problem till I found that my line comments where wrong... And the second definition of CSS wasn't working:
我已经至少 2 个小时试图找到覆盖 CSS 问题，直到我发现我的行注释错误......而 CSS 的第二个定义不起作用：
So, don't be so stupid as I !:
所以，不要像我一样愚蠢！：
/* LITTLE SCREENS */
@media screen and (max-width: 990px) {
... whatever ...
}
/* BIG SCREENS */
@media screen and (min-width: 990px) {
... whatever more ...
}
never use: Double bar as I did:
从不使用：像我一样的双杠：
// This is not a comment in CSS!
/* This is a comment in CSS! */
回答by Jamie JKMedia
What about using !important? If you range your media query from ( min-width: 176px )and ( max-width: 736px )or even up to 980px?
怎么用!important？如果你的范围从媒体的查询( min-width: 176px )和( max-width: 736px )甚至高达980px？
