CSS 在移动优先设计上使用媒体查询删除类属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18405996/
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
Remove a class property with a media query on a mobile first design?
提问by lisovaccaro
I have tab elements with either display: inlineor nonedepending if they are selected. Eg:
我有选项卡元素，display: inline或者none取决于它们是否被选中。例如：
<div class="tab" style="display:inline;"></div>
<div class="tab" style="display:none;"></div>
Then a class in my stylesheet overrides the display property so that all tabs are shown in mobile devices:
然后我的样式表中的一个类覆盖 display 属性，以便所有选项卡都显示在移动设备中：
.tab {
display: block !important;
}
My problem is that I need to prevent this condition to apply to screen bigger than 600px but I cannot use max-width queries. So I need to override display: block !importantwith a min-width media query without applying any other particular style. Eg:
我的问题是我需要防止这种情况应用于大于 600px 的屏幕，但我不能使用 max-width 查询。所以我需要display: block !important用最小宽度的媒体查询覆盖而不应用任何其他特定样式。例如：
@media screen and (min-width: 600px){
.tab {
display: /*don't do anything*/ !important;
}
}
回答by Vahid Hallaji
If you mark selected tab by class name class='selected', can try this way:
如果您按类名标记选定的选项卡class='selected'，可以尝试这种方式：
HTML:
HTML：
<div class="tab selected">1</div>
<div class="tab">2</div>
<div class="tab">3</div>
CSS:
CSS：
.tab {
display: block;
}
@media screen and (min-width: 600px){
.tab {
display: none;
}
.tab.selected {
display: inline-block;
}
}
回答by apaul
I think it is better to avoid using inline styles and !importantwhenever possible try something like:
我认为最好避免使用内联样式，并!important尽可能尝试以下方法：
HTML
HTML
<div class="tab selected">Hello world!</div>
<div class="tab">Good bye world!</div>
CSS
CSS
.tab {
display: inline-block;
}
@media screen and (min-width: 600px) {
.tab {
display: none;
}
.selected {
display:inline-block;
}
}
回答by Minide
First of all: do not use style="" on your HTML. You cannot override the css attributes from an external CSS, even using !important.
首先：不要在 HTML 上使用 style=""。您不能从外部 CSS 覆盖 css 属性，即使使用 !important 也是如此。
I recommend you using only external CSS files, then, let's say you want to override attributes the thing would come this way:
我建议你只使用外部 CSS 文件，然后，假设你想覆盖属性，事情会这样：
.tab {
display: inline;
}
@media screen and (min-width: 600px){
.tab {
display: block, inline or none;
}
}
