Comment puis-je annuler la propriété css?

109

Fondamentalement, j'ai deux css externes dans ma page.

Le premier Main.csscontient toutes les règles de style mais je n'y ai pas accès et je ne peux donc pas le modifier. J'ai accès à un deuxième fichier Template.css, je dois donc remplacer les Main.cssvaleurs de template.css.

C'est facile pour lequel je dois changer la valeur, mais comment supprimer complètement une propriété?

Comme une classe l' .c1a fait height: 40px;, comment puis-je me débarrasser de cette propriété de hauteur?

Bluemagica
la source

Réponses:

175

Vous devez réinitialiser chaque propriété individuelle à sa valeur par défaut. Ce n'est pas génial, mais c'est le seul moyen, compte tenu des informations que vous nous avez fournies.

Dans votre exemple, vous feriez:

.c1 {
    height: auto;
}

Vous devez rechercher chaque propriété ici:

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

Par exempleheight :

Valeur initiale : auto

Un autre exemplemax-height ,:

Valeur initiale : none


En 2017, il existe désormais un autre moyen, le unsetmot - clé:

.c1 {
    height: unset;
}

Quelques documents: https://developer.mozilla.org/en-US/docs/Web/CSS/unset

Le mot-clé CSS non défini est la combinaison des mots-clés initial et hérité. Comme ces deux autres mots-clés à l'échelle CSS, il peut être appliqué à n'importe quelle propriété CSS, y compris le raccourci CSS all. Ce mot clé réinitialise la propriété à sa valeur héritée si elle hérite de son parent ou à sa valeur initiale dans le cas contraire. En d'autres termes, il se comporte comme le mot clé inherit dans le premier cas et comme le mot clé initial dans le second cas.

Le support du navigateur est bon: http://caniuse.com/css-unset-value

trentenaire
la source
3
+1 pour la bonne réponse et la référence. Je pense que le lien a changé pour: developer.mozilla.org/en-US/docs/Web/CSS/Reference
Paolo
La définition de la valeur sur auto ne semble pas fonctionner lorsqu'il n'y a pas de valeur initiale ("valeur initiale: aucune"). Par exemple, lorsque vous faites "max-width: auto;" J'obtiens une erreur de valeur de propriété incompatible. Que devrais-je faire?
user1779563
3
@ user1779563 Vous le définissez sur "aucun".
AndreKR
1
Je tiens à remercier @simhumileco pour sa réponse que j'ai volée sans vergogne car ma réponse est acceptée et les gens ne peuvent pas faire défiler vers le bas.
thirtydot
10
.c1 {
    height: unset;
}

La unsetvaleur ajoutée dans CSS3 résout également ce problème et c'est une méthode encore plus universelle que autoouinitial parce qu'elle définit à chaque propriété CSS sa valeur par défaut et en plus sa valeur par défaut par rapport à son parent.

Notez que la initialvaleur rompt le comportement susmentionné.

De MDN :

Comme ces deux autres mots-clés à l'échelle CSS, il peut être appliqué à n'importe quelle propriété CSS, y compris le raccourci CSS all . Ce mot clé réinitialise la propriété à sa valeur héritée si elle hérite de son parent ou à sa valeur initiale dans le cas contraire.

simhumileco
la source
9

comme disons qu'une classe .c1 a une hauteur: 40px; comment puis-je me débarrasser de cette propriété de hauteur?

Malheureusement, vous ne pouvez pas. CSS n'a pas d'espace réservé «par défaut».

Dans ce cas, vous réinitialisez la propriété en utilisant

 height: auto;

comme @Ben le souligne correctement, dans certains cas, inheritest la bonne façon de procéder, par exemple lors de la réinitialisation de la couleur du texte d'un aélément (cette propriété est héritée de l'élément parent):

a { color: inherit }
Pekka
la source
3
Je vais donner +1 à cela. Il y a aussi la valeur "inherit". Dans certains contextes autres que la hauteur, l'héritage est plus approprié.
Ben
1
@meo vous avez raison. (Question connexe) cela semble signifier qu'il y a des propriétés qui ne peuvent pas être réinitialisées à leur valeur par défaut dans IE ... quel dommage
Pekka
7

Un initialmot-clé est ajouté dans CSS3 pour permettre aux auteurs de spécifier explicitement cette valeur initiale.

RonyK
la source
FYI: height:initial;ne semble pas fonctionner dans IE9.
Kris Hollenbeck
alors quelle est la différence entre initialet autoet unset?.
ExillustX
2

Pour vous débarrasser de la propriété de hauteur fixe, vous pouvez la définir sur la valeur par défaut:

height: auto;
Richard H
la source
2

Vous devez fournir un sélecteur avec une spécificité plus élevée que celui du Main.css. Avec ce sélecteur, définissez les valeurs des propriétés que vous voulez sur leur valeur par défaut, par exemple

body .c1 {
    height: auto;
}

Il n'y a pas de valeur "par défaut" qui fonctionnera pour toutes les propriétés, vous devez rechercher la valeur par défaut pour chacune d'elles et l'utiliser.

Jon
la source
1

J'ai eu un problème qui, même lorsque j'ai remplacé "hauteur" par "non défini" ou "initial", se comportait différemment de la suppression du paramètre précédent.

Il s'est avéré que j'avais également besoin de supprimer la propriété min-height!

height: unset;
min-height: none

Edit: J'ai testé sur IE 7 et il ne reconnaît pas "unset", donc "auto" fonctionne mieux ".

Nathalie Xavier
la source