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

【问题标题】：Remove a class property with a media query on a mobile first design?在移动优先设计中删除带有媒体查询的类属性？
【发布时间】：2013-08-23 14:58:30
【问题描述】：

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

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

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

.tab {
display: block !important;
}

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

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

【问题讨论】：

你为什么使用!important？
“什么都不做”？您可能希望对显示属性应用一些其他值。如果是这样，那么使用div.tab 而不是仅仅提及.tab 并给出display: inline;（或其他一些值）。 [旁注] !important 导致糟糕的设计。
我需要使用 !important 来覆盖所有元素样式属性。我看不出有任何其他方法可以做到这一点。
你不能只使用 css 来重置以前的值。检查这个link。

标签： css

【解决方案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;
    }
}

See demo

【讨论】：

添加一个有效的演示是证明您的解决方案有效的好方法。
我认为这是一个很好的解决方案。如果我编写了 js，我会这样做，但它使用的是 jquery-ui，它将 style="display:block" 或 "display:none" 而不是类添加到元素中。
我注意到 jquery-ui 在选择选项卡时使用aria-expanded="true"，因此我将使用属性作为 .tab.selected。感谢您的回答

【解决方案2】：

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

Working Example

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;
    }
}

【讨论】：

【解决方案3】：

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

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

.tab {
display: inline;
}

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

【讨论】：