使用移動設備上的媒體查詢刪除類屬性？

我有選項卡元素與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; 
} 
}

來源

2013-08-23 lisovaccaro

爲什麼使用'！important'？ – apaul

「_什麼都不做」？您可能想要將其他值應用於顯示屬性。如果是這樣，那麼使用'div.tab'而不是隻提到'.tab'並給出'display：inline;'（或其他值）。 [注意]'！important'會導致糟糕的設計。 –

我需要使用！important重寫所有元素樣式屬性。我沒有看到任何其他的做法。 – lisovaccaro

如果選中類名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

來源

2013-08-23 15:11:12 hallaji

添加工作演示是顯示您的解決方案有效的真正好方法。 – cimmanon

我認爲這是一個很好的解決方案。我會這樣做，我寫了js，但它使用了jquery-ui，它添加了style =「display：block」或「display：none」，而不是類的元素。 – lisovaccaro

我注意到jquery-ui在選擇標籤時使用'aria-expanded =「true」'，所以我將使用.tab.selected屬性。感謝您的回答 – lisovaccaro

-1

首先：不要在HTML上使用style =「」。你不能重寫外部CSS的css屬性，即使使用！important。

我建議你只使用外部CSS文件，那麼，讓我們說你要覆蓋屬性的東西會來這樣：

.tab { 
display: inline; 
} 

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

來源

2013-08-23 15:09:10 Minide

我覺得這是更好地避免使用內聯樣式和!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; 
    } 
}

來源

2013-08-23 15:12:00 apaul

使用移動設備上的媒體查詢刪除類屬性？

回答

相關問題