css - 在移动优先设计中删除带有媒体查询的类属性？

Question

我有选项卡元素，display: inline或者none取决于它们是否被选中。例如：

<div class="tab" style="display:inline;"></div>
<div class="tab" style="display:none;"></div>

然后我的样式表中的一个类覆盖了 display 属性，以便所有选项卡都显示在移动设备中：

.tab {
display: block !important;
}

我的问题是我需要防止这种情况适用于大于 600 像素的屏幕，但我不能使用最大宽度查询。所以我需要display: block !important用最小宽度媒体查询覆盖而不应用任何其他特定样式。例如：

@media screen and (min-width: 600px){
.tab  {
display: /*don't do anything*/ !important; 
}
}

Answer 1

如果您按类名标记选定的选项卡class='selected'，可以尝试这种方式：

HTML：

<div class="tab selected">1</div>
<div class="tab">2</div>
<div class="tab">3</div>

CSS：

.tab {
    display: block;
}

@media screen and (min-width: 600px){
    .tab  {
        display: none;
    }
    .tab.selected {
        display: inline-block;
    }
}

看演示

Answer 2

我认为最好避免使用内联样式，并!important尽可能尝试以下方法：

工作示例

HTML

<div class="tab selected">Hello world!</div>
<div class="tab">Good bye world!</div>

CSS

.tab {
    display: inline-block;
}
@media screen and (min-width: 600px) {
    .tab {
        display: none;
    }
    .selected {
        display:inline-block;
    }
}

Answer 3

首先：不要在 HTML 中使用 style=""。即使使用 !important，您也不能覆盖来自外部 CSS 的 css 属性。

我建议你只使用外部 CSS 文件，然后，假设你想覆盖属性，事情会这样：

.tab {
display: inline;
}

@media screen and (min-width: 600px){
.tab {
display: block, inline or none;
}
}