Question

我的标签元素包含display: inline或none，具体取决于是否已选中。例如：

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

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

.tab {
display: block !important;
}

我的问题是我需要阻止此条件应用于大于600px的屏幕，但我不能使用max-width查询。因此，我需要使用最小宽度的媒体查询覆盖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;
    }
}

See demo

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

Answer 3

首先：不要在HTML上使用style =“”。即使使用！important。

，也无法覆盖外部CSS的css属性

我建议你只使用外部CSS文件，然后，假设你想要覆盖属性的东西：

.tab {
display: inline;
}

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

在移动优先设计中使用媒体查询删除类属性？

3 个答案: