1

タブ要素が選択されているかどうかに応じて、display: inlineまたはのいずれかを持っています。none例えば：

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

次に、スタイルシートのクラスが display プロパティをオーバーライドして、すべてのタブがモバイル デバイスに表示されるようにします。

.tab {
display: block !important;
}

私の問題は、この条件が 600px を超える画面に適用されないようにする必要があることですが、最大幅のクエリを使用できません。display: block !importantしたがって、他の特定のスタイルを適用せずに最小幅のメディア クエリでオーバーライドする必要があります。例えば：

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

3 に答える 3

6

選択したタブをクラス名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;
    }
}

デモを見る

于 2013-08-23T15:11:12.040 に答える
0

!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;
    }
}
于 2013-08-23T15:12:00.497 に答える
-1

まず、HTML で style="" を使用しないでください。!important を使用しても、外部 CSS から css 属性をオーバーライドすることはできません。

外部 CSS ファイルのみを使用することをお勧めします。次に、属性をオーバーライドしたい場合は次のようになります。

.tab {
display: inline;
}

@media screen and (min-width: 600px){
.tab {
display: block, inline or none;
}
}
于 2013-08-23T15:09:10.090 に答える