Redefinir / remover estilos CSS apenas para elemento

Tenho certeza de que isso deve ter sido mencionado / solicitado antes, mas tenho procurado uma idade sem sorte, minha terminologia deve estar errada!

Lembro-me vagamente de um tweet que vi há algum tempo sugerindo que havia uma regra css disponível que removeria qualquer estilo definido anteriormente na folha de estilo para um elemento específico.

Um bom exemplo de uso pode estar em um site RWD para dispositivos móveis, onde grande parte do estilo usado para um elemento específico nas exibições de tela pequena precisa ser "redefinido" ou removido para o mesmo elemento na exibição da área de trabalho.

Uma regra css que poderia alcançar algo como:

.element {
  all: none;
}

Exemplo de uso:

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

Assim, poderíamos remover ou redefinir rapidamente o estilo sem precisar declarar todas as propriedades.

Faz sentido?

A palavra-chave CSS3 initialdefine a propriedade CSS3 para o valor inicial, conforme definido na especificação . A initialpalavra-chave possui amplo suporte ao navegador exceto para as famílias IE e Opera Mini.

Como a falta de suporte do IE pode causar problemas, aqui estão algumas das maneiras de redefinir algumas propriedades CSS para seus valores iniciais:

.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;
    /* basic modern patch */
    all: initial;
    all: unset;
}

/* basic modern patch */

#reset-this-root {
    all: initial;
    * {
        all: unset;
    }
}

• Repositório do github relevante com uma lista mais exaustiva de dezembro de 2017
• Relacionado
• Relacionados com MDN
• Especificações relacionadas do W3C

Conforme mencionado em um comentário de @ user566245:

isso é correto em princípio, mas a milhagem individual pode variar. Por exemplo, certos elementos como área de texto por padrão têm uma borda, a aplicação dessa redefinição tornará a borda da área de texto menor.

[POST EDIT 4 DE FEVEREIRO DE 1917] Votado por se tornar uma norma moderna, usuário Joost

#reset-this-parent {
  all: initial;
  * {
    all: unset;
  }
}

EXEMPLO DA W3

Por exemplo, se um autor especificar tudo: inicial em um elemento, ele bloqueará toda a herança e redefinirá todas as propriedades, como se nenhuma regra aparecesse nos níveis de autor, usuário ou agente de usuário da cascata.

Isso pode ser útil para o elemento raiz de um "widget" incluído em uma página, que não deseja herdar os estilos da página externa. Observe, no entanto, que qualquer estilo "padrão" aplicado a esse elemento (como, por exemplo, display: block da folha de estilos do UA em elementos de bloco como) também será deslumbrado.

JAVASCRIPT?

Ninguém pensou em outro senão css para redefinir css? Sim?

Existe esse recorte totalmente relevante: https://stackoverflow.com/a/14791113/845310

getElementsByTagName ("*") retornará todos os elementos do DOM. Em seguida, você pode definir estilos para cada elemento da coleção:

respondeu Feb 9 '13 às 20:15 por VisioN

var allElements = document.getElementsByTagName("*");
for (var i = 0, len = allElements.length; i < len; i++) {
    var element = allElements[i];
    // element.style.border = ...
}

Com tudo isso dito; Eu não acho que uma redefinição de css é algo viável, a menos que acabemos com apenas um navegador da web ... se o 'padrão' for definido pelo navegador no final.

Para comparação, aqui está a lista de valores do Firefox 40.0 para uma <blockquote style="all: unset;font-style: oblique">localização font-style: obliqueDOM que aciona a operação.

align-content: unset;
align-items: unset;
align-self: unset;
animation: unset;
appearance: unset;
backface-visibility: unset;
background-blend-mode: unset;
background: unset;
binding: unset;
block-size: unset;
border-block-end: unset;
border-block-start: unset;
border-collapse: unset;
border-inline-end: unset;
border-inline-start: unset;
border-radius: unset;
border-spacing: unset;
border: unset;
bottom: unset;
box-align: unset;
box-decoration-break: unset;
box-direction: unset;
box-flex: unset;
box-ordinal-group: unset;
box-orient: unset;
box-pack: unset;
box-shadow: unset;
box-sizing: unset;
caption-side: unset;
clear: unset;
clip-path: unset;
clip-rule: unset;
clip: unset;
color-adjust: unset;
color-interpolation-filters: unset;
color-interpolation: unset;
color: unset;
column-fill: unset;
column-gap: unset;
column-rule: unset;
columns: unset;
content: unset;
control-character-visibility: unset;
counter-increment: unset;
counter-reset: unset;
cursor: unset;
display: unset;
dominant-baseline: unset;
empty-cells: unset;
fill-opacity: unset;
fill-rule: unset;
fill: unset;
filter: unset;
flex-flow: unset;
flex: unset;
float-edge: unset;
float: unset;
flood-color: unset;
flood-opacity: unset;
font-family: unset;
font-feature-settings: unset;
font-kerning: unset;
font-language-override: unset;
font-size-adjust: unset;
font-size: unset;
font-stretch: unset;
font-style: oblique;
font-synthesis: unset;
font-variant: unset;
font-weight: unset;
font: ;
force-broken-image-icon: unset;
height: unset;
hyphens: unset;
image-orientation: unset;
image-region: unset;
image-rendering: unset;
ime-mode: unset;
inline-size: unset;
isolation: unset;
justify-content: unset;
justify-items: unset;
justify-self: unset;
left: unset;
letter-spacing: unset;
lighting-color: unset;
line-height: unset;
list-style: unset;
margin-block-end: unset;
margin-block-start: unset;
margin-inline-end: unset;
margin-inline-start: unset;
margin: unset;
marker-offset: unset;
marker: unset;
mask-type: unset;
mask: unset;
max-block-size: unset;
max-height: unset;
max-inline-size: unset;
max-width: unset;
min-block-size: unset;
min-height: unset;
min-inline-size: unset;
min-width: unset;
mix-blend-mode: unset;
object-fit: unset;
object-position: unset;
offset-block-end: unset;
offset-block-start: unset;
offset-inline-end: unset;
offset-inline-start: unset;
opacity: unset;
order: unset;
orient: unset;
outline-offset: unset;
outline-radius: unset;
outline: unset;
overflow: unset;
padding-block-end: unset;
padding-block-start: unset;
padding-inline-end: unset;
padding-inline-start: unset;
padding: unset;
page-break-after: unset;
page-break-before: unset;
page-break-inside: unset;
paint-order: unset;
perspective-origin: unset;
perspective: unset;
pointer-events: unset;
position: unset;
quotes: unset;
resize: unset;
right: unset;
ruby-align: unset;
ruby-position: unset;
scroll-behavior: unset;
scroll-snap-coordinate: unset;
scroll-snap-destination: unset;
scroll-snap-points-x: unset;
scroll-snap-points-y: unset;
scroll-snap-type: unset;
shape-rendering: unset;
stack-sizing: unset;
stop-color: unset;
stop-opacity: unset;
stroke-dasharray: unset;
stroke-dashoffset: unset;
stroke-linecap: unset;
stroke-linejoin: unset;
stroke-miterlimit: unset;
stroke-opacity: unset;
stroke-width: unset;
stroke: unset;
tab-size: unset;
table-layout: unset;
text-align-last: unset;
text-align: unset;
text-anchor: unset;
text-combine-upright: unset;
text-decoration: unset;
text-emphasis-position: unset;
text-emphasis: unset;
text-indent: unset;
text-orientation: unset;
text-overflow: unset;
text-rendering: unset;
text-shadow: unset;
text-size-adjust: unset;
text-transform: unset;
top: unset;
transform-origin: unset;
transform-style: unset;
transform: unset;
transition: unset;
user-focus: unset;
user-input: unset;
user-modify: unset;
user-select: unset;
vector-effect: unset;
vertical-align: unset;
visibility: unset;
white-space: unset;
width: unset;
will-change: unset;
window-dragging: unset;
word-break: unset;
word-spacing: unset;
word-wrap: unset;
writing-mode: unset;
z-index: unset;

Para futuros leitores. Eu acho que foi isso que queria dizer, mas atualmente não é realmente suportado (veja abaixo):

#someselector {
  all: initial;
  * {
    all: unset;
  }
}

• Compatível com ( fonte ): Chrome 37, Firefox 27, IE 11, Opera 24
• Não suportado: Safari

Há uma nova solução encontrada para esse problema.

Use all: revertouall: unset .

Do MDN:

A palavra-chave reversa funciona exatamente da mesma forma que a desativada em muitos casos. A única diferença é para propriedades que possuem valores definidos pelo navegador ou por folhas de estilo personalizadas criadas pelos usuários (definidas no lado do navegador).

Você precisa de "Uma regra css disponível que remova qualquer estilo definido anteriormente na folha de estilo para um elemento específico".

Portanto, se o elemento tiver um nome de classe como remove-all-styles :

Por exemplo:

HTML:

<div class="remove-all-styles other-classe another-class"> 
   <!-- content -->
   <p class="text-red other-some-styles"> My text </p>
</div>

Com CSS:

  .remove-all-styles {
    all: revert;
  }

Irá repor todos os estilos aplicados por other-class, another-classe todos os outros herdado e aplicado estilos ao quediv .

Ou no seu caso:

/* 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: revert;
  }
}

Vai fazer.

Aqui usamos uma propriedade CSS legal com outro valor CSS legal.

1. revert

Na verdade revert, como o nome diz, reverte essa propriedade para seu estilo de usuário ou agente de usuário.

2. all

E quando usamos revertcom a allpropriedade, todas as propriedades CSS aplicadas a esse elemento serão revertidas para estilos de usuário / agente de usuário.

Clique aqui para saber a diferença entre estilos de autor, usuário e agente de usuário.

Por exemplo: se quisermos isolar widgets / componentes incorporados dos estilos da página que os contém , poderíamos escrever:

.isolated-component {
 all: revert;
}

O que reverterá todos author styles(ou seja, CSS do desenvolvedor) para user styles(estilos que um usuário do nosso site define - cenário menos provável) ou para os user-agentpróprios estilos se nenhum estilo de usuário estiver definido.

Mais detalhes aqui: https://developer.mozilla.org/en-US/docs/Web/CSS/revert

E o único problema é o suporte : somente o Safari 9.1 e o iOS Safari 9.3 têm suporte para revertvalor no momento da redação.

Então, vou dizer que use esse estilo e faça o fallback para outras respostas.

Deixe-me responder a essa pergunta completamente, porque tem sido uma fonte de dor para mim há vários anos e muito poucas pessoas realmente entendem o problema e por que é importante que ele seja resolvido. Se eu fosse responsável pelas especificações CSS, ficaria constrangido, francamente, por não ter abordado isso na última década.

O problema

Você precisa inserir a marcação em um documento HTML, e ele precisa ter uma aparência específica. Além disso, você não possui este documento, portanto não pode alterar as regras de estilo existentes. Você não tem idéia do que poderiam ser as folhas de estilo ou para o que elas podem mudar.

Os casos de uso são quando você fornece um componente que pode ser exibido para sites desconhecidos de terceiros. Exemplos disso seriam:

1. Uma tag de anúncio
2. Construindo uma extensão de navegador que insere conteúdo
3. Qualquer tipo de widget

Correção mais simples

Coloque tudo em um iframe. Isso tem seu próprio conjunto de limitações:

1. Limitações entre domínios: seu conteúdo não terá acesso ao documento original. Você não pode sobrepor conteúdo, modificar o DOM etc.
2. Limitações da exibição: seu conteúdo está bloqueado dentro de um retângulo.

Se o seu conteúdo pode caber em uma caixa, você pode contornar o problema nº 1 fazendo com que ele escreva um iframe e defina explicitamente o conteúdo, contornando o problema, pois o iframe e o documento compartilharão o mesmo domínio.

Solução CSS

Procurei em toda a parte a solução para isso, mas infelizmente não há nenhuma. O melhor que você pode fazer é substituir explicitamente todas as propriedades possíveis que podem ser substituídas e substituí-las pelo que você pensa deveria ser.

Mesmo quando você substitui, não há como garantir que uma regra CSS mais direcionada não substitua a sua . O melhor que você pode fazer aqui é ter as regras de substituição como o mais especificamente possível e esperar que o documento pai não seja o melhor acidentalmente: use um ID obscuro ou aleatório no elemento pai do seu conteúdo e use! Important em todas as definições de valor de propriedade .

outras maneiras:

1) inclua o código css (arquivo) do Yahoo CSS reset e coloque tudo dentro deste DIV:

<div class="yui3-cssreset">
    <!-- Anything here would be reset-->
</div>

2) ou use

• https://cssreset.com/scripts/vanilla-css-un-reset/
• https://cssreset.com/scripts/html5-doctor-css-reset-stylesheet/
• https://cssreset.com/scripts/eric-meyer-reset-css/
• https://cssreset.com/scripts/tripoli-css-reset-david-hellsing/
• https://cssreset.com/scripts/normalize-css/

Não recomendo usar a resposta que foi marcada como correta aqui. É uma enorme bolha de CSS que tenta cobrir tudo.

Sugiro que você avalie como remover o estilo de um elemento em uma base por caso.

Digamos que, para fins de SEO, você precise incluir um H1 em uma página que não tenha um cabeçalho real no design. Você pode querer tornar o link de navegação dessa página um H1, mas é claro que não deseja que o link de navegação seja exibido como um H1 gigante na página.

O que você deve fazer é agrupar esse elemento em uma tag h1 e inspecioná-lo. Veja quais estilos CSS estão sendo aplicados especificamente ao elemento h1.

Digamos que eu veja os seguintes estilos aplicados ao elemento.

//bootstrap.min.css:1
h1 {
    font-size: 65px;
    font-family: 'rubikbold'!important;
    font-weight: normal;
    font-style: normal;
    text-transform: uppercase;
}

//bootstrap.min.css:1
h1, .h1 {
    font-size: 36px;
}

//bootstrap.min.css:1
h1, .h1, h2, .h2, h3, .h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

//bootstrap.min.css:1
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

//bootstrap.min.css:1
h1 {
    margin: .67em 0;
    font-size: 2em;
}

//user agent stylesheet
h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

Agora você precisa apontar o estilo exato que é aplicado ao H1 e desmarcá-lo em uma classe css. Isso seria algo como o seguinte:

.no-style-h1 {
    font-size: unset !important;
    font-family: unset !important;
    font-weight: unset !important;
    font-style: unset !important;
    text-transform: unset !important;
    margin-top: unset !important;
    margin-bottom: unset !important;
    font-family: unset !important;
    line-height: unset !important;
    color: unset !important;
    margin: unset !important;
    display: unset !important;
    -webkit-margin-before: unset !important;
    -webkit-margin-after: unset !important;
    -webkit-margin-start: unset !important;
    -webkit-margin-end: unset !important;
}

Isso é muito mais limpo e não apenas despeja um blob aleatório de código em seu css, que você não sabe o que está realmente fazendo.

Agora você pode adicionar esta classe ao seu h1

<h1 class="no-style-h1">
     Title
</h1>

Se você estiver usando sass em um sistema de compilação, uma maneira de fazer isso que funcionará em todos os principais navegadores é agrupar todas as suas importações de estilo com um seletor:: not () assim ...

:not(.disable-all-styles) {
  @import 'my-sass-file';
  @import 'my-other-sass-file';
}

Em seguida, você pode usar a classe desativar em um contêiner e o sub-conteúdo não terá nenhum dos seus estilos.

<div class="disable-all-styles">
  <p>Nothing in this div is affected by my sass styles.</p>
</div>

É claro que todos os seus estilos agora serão anexados com o seletor: not (), por isso é um pouco fugaz, mas funciona bem.

Você mencionou sites para dispositivos móveis primeiro ... Para um design responsivo, certamente é possível substituir estilos de tela pequena por estilos de tela grande. Mas você pode não precisar.

Tente o seguinte:

.thisClass {
    /* Rules for all window sizes. */
}

@media all and (max-width: 480px) {
    .thisClass {
        /* Rules for only small browser windows. */
    }
}

@media all and (min-width: 481px) and (max-width: 960px) {
    .thisClass {
        /* Rules for only medium browser windows. */
    }
}

@media all and (min-width: 961px) {
    .thisClass {
        /* Rules for only large browser windows. */
    }
}

Essas consultas de mídia não se sobrepõem, portanto, suas regras não se substituem. Isso facilita a manutenção de cada conjunto de estilos separadamente.

MELHOR SOLUÇÃO

Faça o download da folha de estilo "copiar / colar" para redefinir as propriedades css para o padrão (estilo UA):
https://github.com/monmomo04/resetCss.git

Obrigado @ Milche Patern!
Eu estava realmente procurando por valor de propriedades de estilo de redefinição / padrão. Minha primeira tentativa foi copiar o valor calculado da ferramenta Dev do navegador do elemento raiz (html). Mas, como calculado, teria parecido / funcionado de maneira diferente em todos os sistemas.
Para aqueles que encontram uma falha no navegador ao tentar usar o asterisco * para redefinir o estilo dos elementos filhos, e como eu sabia que não funcionava para você, substituí o asterisco "*" por todo o nome das tags HTML . O navegador não travou; Estou no Chrome versão 46.0.2490.71 m.
Por fim, é bom mencionar que essas propriedades redefinirão o estilo para o estilo padrão do elemento raiz mais alto, mas não para o valor inicial de cada elemento HTML. Então, para corrigir isso, peguei os estilos "user-agent" do navegador baseado em webkit e o implementei na classe "reset-this".

Faça o download da folha de estilo "copiar / colar" para redefinir as propriedades css para o padrão (estilo UA):
https://github.com/monmomo04/resetCss.git

Estilo de agente do usuário:
CSS padrão dos navegadores para elementos HTML
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

Especificação de CSS (preste atenção à especificação):
https://css-tricks.com/specifics-on-css-specificity/

https://github.com/monmomo04/resetCss.git

No meu cenário específico, eu queria pular a aplicação de estilos comuns a uma parte específica da página, melhor ilustrada desta forma:

<body class='common-styles'>
    <div id='header'>Wants common styles</div>
    <div id='container'>Does NOT want common styles</div>
    <div id='footer'>Wants common styles</div>
</body>

Depois de mexer com a redefinição do CSS, que não trouxe muito sucesso (principalmente por causa da precedência das regras e da hierarquia complexa da folha de estilo), trouxe o jQuery onipresente para o resgate, que fez o trabalho muito rápida e razoavelmente sujo:

$(function() {
    $('body').removeClass('common-styles');
    $('#header,#footer').addClass('common-styles');
});

(Agora diga como é ruim usar JS para lidar com CSS :-))

Para aqueles que tentam descobrir como realmente remover o estilo apenas do elemento, sem remover o css dos arquivos, esta solução funciona com o jquery:

$('.selector').removeAttr('style');

se você definir seu CSS dentro de classes, poderá removê-los facilmente usando o método jQuery removeClass (). O código abaixo remove a classe .element:

    <div class="element">source</div>   
    <div class="destination">destination</div>
      <script>
        $(".element").removeClass();
      </script>

Se nenhum parâmetro for especificado, esse método removerá TODOS os nomes de classe dos elementos selecionados.

Não, isso é apenas uma questão de gerenciar melhor sua estrutura css.

No seu caso, eu pediria o meu css algo como isto:

.element, .element1, .element2 p{z-index: 50; display: block}
.element, .element1{margin: 0 10}
.element2 p{transform: translate3d(0, 0, 0)}

@media only screen and (min-width: 980px) {
.element, .element1, .element2 p{display: none}
}

Apenas experimente.

Alguma chance de você procurar a regra! Important? Não desfaz todas as declarações, mas fornece uma maneira de substituí-las.

"Quando uma regra! Importante é usada em uma declaração de estilo, essa declaração substitui qualquer outra declaração feita no CSS, onde quer que esteja na lista de declarações. Embora!! Importante não tenha nada a ver com especificidade."

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