Supprimer une propriété de classe avec une requête de média sur un premier mobile de la conception?

J'ai onglet éléments, soit avec display: inline ou none selon s'ils sont sélectionnés. Par exemple:

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

Puis une classe dans ma feuille de style remplace l'affichage de la propriété, de sorte que tous les onglets sont affichés dans les appareils mobiles:

.tab {
display: block !important;
}

Mon problème est que j'ai besoin de prévenir cette condition s'applique à l'écran plus grand que 600px mais je ne peux pas utiliser max-width requêtes. Donc j'ai besoin de remplacer display: block !important avec un min-width requête de média sans appliquer n'importe quel autre style particulier. Par exemple:

@media screen and (min-width: 600px){
.tab  {
display: /*don't do anything*/ !important; 
}
}
  • Pourquoi êtes-vous à l'aide de !important?
  • "ne rien faire"? vous pouvez appliquer une autre valeur à la propriété display. Si oui, alors utiliser div.tab au lieu de simplement mentionner .tab et donner display: inline; (ou une autre valeur). [remarque] !important conduit à une mauvaise conception.
  • - Je besoin pour utiliser !important de remplacer tout élément attributs de style. Je ne vois pas d'autre moyen de le faire.
  • Vous ne pouvez pas réinitialiser les valeurs précédentes en utilisant simplement le css mais.. cochez cette lien.
InformationsquelleAutor lisovaccaro | 2013-08-23
  1. 5

    Si vous cochez l'onglet sélectionné par le nom de classe class='selected', peut essayer de cette façon:

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

    Voir la démo

    • L'ajout d'un travail de démonstration est une très bonne façon de montrer que votre solution fonctionne.
    • Je pense que c'est une excellente solution. Et je voudrais faire comme ceci je vous ai écrit le js mais c'est à l'aide de jquery ui, qui ajoutent au style="display:block" ou "display:none" au lieu d'une classe à l'élément.
    • J'ai remarqué jquery-ui utilise aria-expanded="true" lorsqu'un onglet est sélectionné, donc je vais utiliser l'attribut .onglet.sélectionné. Merci pour votre réponse
    InformationsquelleAutor Vahid Hallaji
  2. 0

    Je pense qu'il est préférable d'éviter d'utiliser des styles en ligne et !important chaque fois que possible, essayez quelque chose comme:

    Exemple De Travail

    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;
    }
}
    InformationsquelleAutor apaul
  3. -1

    Tout d'abord: ne pas utiliser le style="" sur votre code HTML. Vous ne pouvez pas remplacer le css attributs à partir d'un CSS externe, même en utilisant des !important.

    Je vous recommandons d'utiliser uniquement les fichiers CSS externes, alors, disons que vous voulez remplacer les attributs de la chose viendrait de cette façon:

    .tab {
display: inline;
}

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