Remise à zéro/supprimer les styles CSS pour élément seulement

Question

Je suis sûr que cela doit avoir été mentionné/demandé avant, mais avez été la recherche d'un âge à pas de chance, ma terminologie doit être faux!

Je me souviens vaguement d'un tweet que j'ai vu il ya un moment que suggéré il y avait une règle css qui seraient supprimer tous les styles précédemment défini dans la feuille de style d'un élément particulier.

Un bon exemple pourrait être dans un mobile-first RWD site où beaucoup le style utilisé pour un élément particulier du petit écran des vues besoins "réinitialiser" ou de retrait pour le même élément dans la vue du bureau.

Une règle css qui pourrait atteindre quelque chose comme:

.element {
  all: none;
}

Eaxmple utilisation:

/* mobile first */
.element {
   margin: 0 10;
   transform: translate3d(0, 0, 0);
   z-index: 50;
   display: block;
   etc..
   etc..
}

@media only screen and (min-width: 980px) {
  .element {
    all: none;
  }
}

Nous avons donc possible de supprimer rapidement ou re-définir le style sans avoir à déclarer tous les biens.

Un sens?

Answer 1

Eh bien, le CSS3 mot-clé initial qui permettra de définir la propriété CSS3 à la valeur initiale telle que définie dans la spécification.

Donc, jusqu'à ce que le plein soutien des terres sur tous les navigateurs, voici quelques façons qui vous pouvez réinitialiser certaines propriétés CSS à leurs valeurs initiales avec quelque chose comme ceci :

.reset-this {
    animation : none;
    animation-delay : 0;
    animation-direction : normal;
    animation-duration : 0;
    animation-fill-mode : none;
    animation-iteration-count : 1;
    animation-name : none;
    animation-play-state : running;
    animation-timing-function : ease;
    backface-visibility : visible;
    background : 0;
    background-attachment : scroll;
    background-clip : border-box;
    background-color : transparent;
    background-image : none;
    background-origin : padding-box;
    background-position : 0 0;
    background-position-x : 0;
    background-position-y : 0;
    background-repeat : repeat;
    background-size : auto auto;
    border : 0;
    border-style : none;
    border-width : medium;
    border-color : inherit;
    border-bottom : 0;
    border-bottom-color : inherit;
    border-bottom-left-radius : 0;
    border-bottom-right-radius : 0;
    border-bottom-style : none;
    border-bottom-width : medium;
    border-collapse : separate;
    border-image : none;
    border-left : 0;
    border-left-color : inherit;
    border-left-style : none;
    border-left-width : medium;
    border-radius : 0;
    border-right : 0;
    border-right-color : inherit;
    border-right-style : none;
    border-right-width : medium;
    border-spacing : 0;
    border-top : 0;
    border-top-color : inherit;
    border-top-left-radius : 0;
    border-top-right-radius : 0;
    border-top-style : none;
    border-top-width : medium;
    bottom : auto;
    box-shadow : none;
    box-sizing : content-box;
    caption-side : top;
    clear : none;
    clip : auto;
    color : inherit;
    columns : auto;
    column-count : auto;
    column-fill : balance;
    column-gap : normal;
    column-rule : medium none currentColor;
    column-rule-color : currentColor;
    column-rule-style : none;
    column-rule-width : none;
    column-span : 1;
    column-width : auto;
    content : normal;
    counter-increment : none;
    counter-reset : none;
    cursor : auto;
    direction : ltr;
    display : inline;
    empty-cells : show;
    float : none;
    font : normal;
    font-family : inherit;
    font-size : medium;
    font-style : normal;
    font-variant : normal;
    font-weight : normal;
    height : auto;
    hyphens : none;
    left : auto;
    letter-spacing : normal;
    line-height : normal;
    list-style : none;
    list-style-image : none;
    list-style-position : outside;
    list-style-type : disc;
    margin : 0;
    margin-bottom : 0;
    margin-left : 0;
    margin-right : 0;
    margin-top : 0;
    max-height : none;
    max-width : none;
    min-height : 0;
    min-width : 0;
    opacity : 1;
    orphans : 0;
    outline : 0;
    outline-color : invert;
    outline-style : none;
    outline-width : medium;
    overflow : visible;
    overflow-x : visible;
    overflow-y : visible;
    padding : 0;
    padding-bottom : 0;
    padding-left : 0;
    padding-right : 0;
    padding-top : 0;
    page-break-after : auto;
    page-break-before : auto;
    page-break-inside : auto;
    perspective : none;
    perspective-origin : 50% 50%;
    position : static;
    /* May need to alter quotes for different locales (e.g fr) */
    quotes : '\201C' '\201D' '\2018' '\2019';
    right : auto;
    tab-size : 8;
    table-layout : auto;
    text-align : inherit;
    text-align-last : auto;
    text-decoration : none;
    text-decoration-color : inherit;
    text-decoration-line : none;
    text-decoration-style : solid;
    text-indent : 0;
    text-shadow : none;
    text-transform : none;
    top : auto;
    transform : none;
    transform-style : flat;
    transition : none;
    transition-delay : 0s;
    transition-duration : 0s;
    transition-property : none;
    transition-timing-function : ease;
    unicode-bidi : normal;
    vertical-align : baseline;
    visibility : visible;
    white-space : normal;
    widows : 0;
    width : auto;
    word-spacing : normal;
    z-index : auto;
}

• Source de propriétés
• Liées
• Connexes de MDN
• Liées spécifications du W3C

Answer 2

une autre manière :

1) avec le Yahoo reset http://yuilibrary.com/yui/docs/cssreset/ puis mettre le tout dans ce DIV :

2) utiliser http://www.cssreset.com

Answer 3

Non, ce n’est qu’une question de la gestion de votre structure css mieux.

Dans votre cas je commande mon css quelque chose comme ceci :

Tout expérimenter.

Answer 4

À tout hasard vous êtes à la recherche pour le !règle importante? Cela n'efface pas toutes les déclarations, mais il fournit un moyen de les remplacer.

"Quand un !règle importante est utilisé sur une déclaration de style, cette déclaration remplace toute autre déclaration faite dans le CSS, partout où il est dans la déclaration de la liste. Bien que, !important n'a rien à voir avec la spécificité."

https://developer.mozilla.org/en-US/docs/CSS/Specificity#The_!important_exception