Como posso anular a propriedade css?

109

Basicamente, tenho dois css externos na minha página.

O primeiro Main.csscontém todas as regras de estilo, mas não tenho acesso a ele e, portanto, não posso modificá-lo. Tenho acesso a um segundo arquivo Template.css, então preciso substituir os Main.cssvalores de em template.css.

É fácil, pelo que tenho de alterar o valor, mas como posso remover uma propriedade completamente?

Por exemplo, digamos que uma classe .c1tenha height: 40px;, como faço para me livrar dessa propriedade de altura?

Bluemagica
fonte

Respostas:

175

Você deve redefinir cada propriedade individual de volta ao seu valor padrão. Não é ótimo, mas é a única maneira, dadas as informações que você nos deu.

Em seu exemplo, você faria:

.c1 {
    height: auto;
}

Você deve pesquisar cada propriedade aqui:

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

Por exemploheight :

Valor inicial : auto

Outro exemplomax-height :

Valor inicial : none


Em 2017, existe agora uma outra forma, a unsetpalavra-chave:

.c1 {
    height: unset;
}

Alguma documentação: https://developer.mozilla.org/en-US/docs/Web/CSS/unset

A palavra-chave CSS não definida é a combinação das palavras-chave inicial e herdada. Como essas duas outras palavras-chave em todo o CSS, ele pode ser aplicado a qualquer propriedade CSS, incluindo a abreviação de CSS all. Esta palavra-chave redefine a propriedade para seu valor herdado se ela herdar de seu pai ou para seu valor inicial se não for. Em outras palavras, ela se comporta como a palavra-chave herdada no primeiro caso e como a palavra-chave inicial no segundo caso.

O suporte do navegador é bom: http://caniuse.com/css-unset-value

trinta pontos
fonte
3
1 para a boa resposta e referência. Acho que o link mudou para: developer.mozilla.org/en-US/docs/Web/CSS/Reference
Paolo
Definir o valor como automático não parece funcionar quando não há um valor inicial ("valor inicial: nenhum"). Por exemplo, ao fazer "max-width: auto;" Recebo um erro de valor de propriedade incompatível. O que devo fazer?
user1779563
3
@ user1779563 Você o definiu como "nenhum".
AndreKR
1
Gostaria de agradecer a @simhumileco por sua resposta, que descaradamente roubei, pois minha resposta foi aceita e as pessoas não podem rolar para baixo.
trinta dias
10
.c1 {
    height: unset;
}

O unsetvalor adicionado em CSS3 também resolve esse problema e é ainda mais um método universal do que autoouinitial porque define para cada propriedade CSS seu valor padrão e, adicionalmente, seu comportamento padrão em relação ao pai.

Observe que o initialvalor quebra o comportamento mencionado.

Do MDN :

Como essas duas outras palavras-chave em todo o CSS, ele pode ser aplicado a qualquer propriedade CSS, incluindo a abreviação de CSS all . Esta palavra-chave redefine a propriedade para seu valor herdado se ela herdar de seu pai ou para seu valor inicial se não for.

simhumileco
fonte
9

como, digamos, uma classe .c1 tem altura: 40px; como faço para me livrar dessa propriedade de altura?

Infelizmente, você não pode. CSS não tem um espaço reservado "padrão".

Nesse caso, você redefiniria a propriedade usando

 height: auto;

como @Ben aponta corretamente, em alguns casos, inherité o caminho correto a seguir, por exemplo, ao redefinir a cor do texto de um aelemento (essa propriedade é herdada do elemento pai):

a { color: inherit }
Pekka
fonte
3
Eu darei +1 para isso. Também existe o valor "herdar". Em alguns contextos diferentes da altura, herdar é mais apropriado.
Ben
1
@meo você está certo. (Pergunta relacionada) que parece significar que há propriedades que não podem ser redefinidas para seus padrões no IE ... que pena
Pekka
7

Uma initialpalavra-chave está sendo adicionada ao CSS3 para permitir que os autores especifiquem explicitamente esse valor inicial.

RonyK
fonte
FYI: height:initial;não parece funcionar no IE9.
Kris Hollenbeck
então qual é a diferença entre initiale autoe unset?.
ExillustX
2

Para se livrar da propriedade de altura fixa, você pode defini-la com o valor padrão:

height: auto;
Richard H
fonte
2

Você precisa fornecer um seletor com maior especificidade do que aquele em Main.css. Com esse seletor, defina os valores das propriedades que deseja para o padrão, por exemplo

body .c1 {
    height: auto;
}

Não há um valor "padrão" que funcione para todas as propriedades, você precisa verificar qual é o padrão para cada uma e usá-lo.

Jon
fonte
1

Tive um problema que, mesmo quando substituí "altura" para "não definido" ou "inicial", ele se comportava de maneira diferente de quando removi a configuração anterior.

Acontece que eu precisava remover a propriedade min-height também!

height: unset;
min-height: none

Edit: Eu testei no IE 7 e ele não reconhece "unset", então "auto" funciona melhor ".

Nathalia Xavier
fonte