Repor / remover os estilos de CSS apenas para o elemento

Question

Repor / remover os estilos de CSS apenas para o elemento

Tenho a certeza que isto já deve ter sido mencionado e perguntado antes, mas tenho andado à procura de uma idade sem sorte, a minha terminologia deve estar errada!

lembro-me vagamente de um tweet que vi há algum tempo que sugeriu que havia uma regra css disponível que removeria qualquer estilo previamente definido na folha de estilo para um elemento em particular.

um bom exemplo de uso pode ser em um site RWD móvel-primeiro, onde grande parte do estilo usado para um determinado elemento nas vistas de tela pequena necessita de' reiniciar ' ou remover para o mesmo elemento na área de trabalho.

Uma regra do css que pode alcançar algo como:

.element {
  all: none;
}

Uso de exemplo:

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

então poderíamos rapidamente remover ou re-definir o estilo sem ter que declarar todas as propriedades.

faz sentido?

358

css

Author: user5649133, 2013-04-09

Source

14 answers

Para futuros leitores. Acho que foi isso que se quis dizer, mas atualmente não é bem suportado (ver abaixo):

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

suportado em (Fonte ): Chrome 37, Firefox 27, IE 11, Opera 24
não suportado: Safari

120

Author: joost, 2015-07-09 12:47:10

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

O Problema

Você precisa inserir uma marcação num documento HTML, e ele precisa de olhar de uma forma específica. Além disso, não é dono disto. documento, por isso não pode alterar as regras de estilo existentes. Você não tem idéia do que as folhas de estilo poderiam ser, ou para o que eles podem mudar.

Usar casos para isto é quando você está fornecendo um componente deslocável para sites de terceiros desconhecidos a usar. Exemplos disto seriam:

uma etiqueta de publicidade
a construir uma extensão do navegador que insere o conteúdo
qualquer tipo de elemento gráfico

Solução Mais Simples

Coloque tudo numa iframe. Presente tem o seu próprio conjunto de limitações:

limitações de domínio cruzado: o seu conteúdo não terá acesso ao documento original. Você não pode sobrepor o conteúdo, modificar o DOM, etc.
mostrar as limitações: o seu conteúdo está trancado dentro de um rectângulo.

Se o seu conteúdo puder encaixar numa caixa, poderá contornar o problema #1 Se o seu conteúdo escrever uma iframe e definir explicitamente o conteúdo, contornando assim a questão, uma vez que a iframe e o documento compartilhará o mesmo domínio.

Solução de CSS

Procurei por toda a parte a solução para isto, mas infelizmente não há nenhuma. O melhor que pode fazer é sobrepor explicitamente todas as propriedades possíveis que podem ser sobrepostas, e sobrepô-las ao que você pensa que o seu valor por omissão deve ser. Mesmo quando se sobrepõe, não há forma de garantir que uma regra CSS mais específica não sobrepõe a tua. O melhor que pode fazer aqui é ter o seu sobrepor as regras de destino o mais especificamente possível e esperar que o documento pai não acidentalmente melhorá-lo: use um ID obscuro ou aleatório no elemento pai do seu conteúdo, e use !importante em todas as definições de valor da propriedade.

25

Author: JS_Riddler, 2015-02-06 18:51:36

Há uma nova solução para este problema.

Você precisa de "uma regra css disponível que removeria todos os estilos previamente definidos na 'stylesheet' para um determinado elemento."

Então, se o elemento tem um nome de classe como remove-all-styles:

Eg:

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á reiniciar todos os estilos aplicados por other-class, another-class e todos os outros estilos herdados e aplicados a isso div.

Ou em o 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;
  }
}

Está bem.

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

revert

Na verdade revert é, como diz o nome, reverte essa propriedade para ele é estilo utilizador ou agente utilizador.

all

E quando usamos revert com a propriedade all, todas as propriedades CSS aplicado a esse elemento será revertido para os estilos user / user-agent.

Carregue aqui saber a diferença entre os estilos autor, utilizador, agente de utilizador.

Para ex: se quisermos isolar os elementos/componentes incorporados dos estilos da página que os contém , podemos escrever:

.isolated-component {
 all: revert;
}

Que irá reverter todos os author styles (IE developer CSS) para user styles (estilos que um utilizador do nosso site define - cenário sem chance) ou para user-agent estilos próprios se nenhum estilo de utilizador definir.

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

E a única questão é o suporte : apenas o Safari 9.1 e o iOS Safari 9.3 têm suporte para revert no momento da escrita.

Então, vou dizer para usares este estilo e recuares para qualquer outra resposta.

14

Author: Asim K T, 2017-06-29 05:24:13

Outras maneiras:

1) incluir o código css (ficheiro) de Yahoo CSS reset e depois colocar tudo dentro deste DIV:

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

2) ou utilizar http://www.cssreset.com

11

Author: T.Todua, 2016-04-24 12:09:58

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

Eu sugiro que você avalie como remover o estilo de um elemento por caso. ([4]}digamos que para fins de SEO você precisa incluir um H1 em uma página que não tem nenhum título real no projeto. Você pode querer fazer o link de navegação dessa página um H1, mas é claro que você não quer que esse link de navegação para exibir como um H1 gigante em pagina.

O que deves fazer é embrulhar esse elemento numa etiqueta h1 e inspeccioná-lo. Veja que estilos CSS estão sendo aplicados especificamente ao elemento h1.

Digamos que vejo 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 são aplicados ao H1 e desativá-los em uma classe css. Isto seria parecido com 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;
}

Isto é muito mais limpo e não descarrega uma mancha aleatória de código no seu css. o que não sabes o que está a fazer. Agora pode adicionar esta classe ao seu H1

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

2

Author: Harry, 2017-10-26 14:53:38

Se por acaso estiver a usar o SAS num sistema de compilação, uma forma de o fazer que irá funcionar em todos os navegadores principais é embrulhar todas as importações do seu estilo com um selector :not() como tal...

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

Então você pode usar a classe disable em um container e o sub-content 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>

[[3]] claro que todos os seus estilos agora serão preparados com o: não() selector, por isso é um pouco feio, mas funciona bem.

2

Author: BrandonReid, 2018-08-09 18:43:39

No meu cenário específico, eu queria saltar a aplicação de estilos comuns a uma parte específica da Página, mais bem ilustrado assim:

<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 o reset CSS, que não trouxe muito sucesso (principalmente por causa da precedência das regras e hierarquia complexa de stylesheet), trouxe jQuery onipresente para o resgate, que fez o trabalho muito rapidamente e razoavelmente Sujo: [[4]}

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

(agora diga como é mau usar JS para lidar com CSS: -)

1

Author: esteewhy, 2017-12-26 12:27:04

Mencionou os primeiros sites móveis... Para um design sensível, é certamente possível sobrepor estilos de tela pequena com estilos de tela grande. Mas talvez não precises.

Tenta isto:

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

As perguntas dos media não se sobrepõem, por isso as regras deles não se sobrepõem. Isto torna mais fácil manter cada conjunto de estilos separadamente.

0

Author: jkdev, 2015-11-11 11:40:29

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

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

0

Author: Jeff Davenport, 2016-01-27 01:14:02

Se definir o seu CSS dentro das classes, você pode removê-los facilmente usando o método jQuery removeClass (). O código abaixo remove .classe do elemento:

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

Se não for indicado nenhum parâmetro, este método irá remover Todos os nomes das classes dos elementos seleccionados.

0

Author: A. K., 2017-10-24 20:31:15

Por acaso estás à procura do ... regra importante? Não anula todas as declarações, mas fornece uma forma de as anular. "Quando um !regra importante é usada em uma declaração de estilo, esta declaração substitui qualquer outra declaração feita no CSS, onde quer que esteja na lista de declaração. Embora,!importante não tem nada a ver com especificidade."

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

-1

Author: Erik Nijland, 2013-04-09 13:00:31

MELHOR SOLUÇÃO

Obter a folha de estilo "copiar/colar" para repor as propriedades do css por omissão (estilo UA):
https://github.com/monmomo04/resetCss.git

Obrigado@Milche Patern!
Eu estava realmente à procura de reset/valor padrão de propriedades do estilo. A minha primeira tentativa foi copiar o valor calculado da ferramenta dev do navegador do elemento root(html). Mas como calculou, teria parecido / funcionado diferente em todos os sistemas.
Para aqueles que encontram um falha do navegador ao tentar usar o asterisco * para reiniciar o estilo dos elementos filhos, e como eu sabia que não funcionava para você, eu substituí o asterisco "*" por todos os nomes de tags HTML em vez disso. O navegador não caiu; estou na versão Chrome 46.0.2490,71 M.
Por fim, é bom mencionar que essas propriedades irão redefinir o estilo para o estilo padrão do elemento raiz mais topest, mas não para o valor inicial para cada elemento HTML. Então, para corrigir isso, eu tomei o "user-agent" estilos de navegador baseado em webkit e implementou-o sob a classe "reset-this".
Ligação útil:

Obter a folha de estilo "copiar/colar" para repor as propriedades do css por omissão (estilo UA):
https://github.com/monmomo04/resetCss.git

Estilo utilizador-agente:
CSS predefinido dos navegadores para os elementos HTML
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

Especificidade do Css (atenção à especificidade) :
https://css-tricks.com/specifics-on-css-specificity/

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

-1

Author: Monero Jeanniton, 2017-05-23 12:02:49

Não,isto é apenas uma questão de gerir melhor a tua estrutura css. No seu caso, pediria ao meu css algo assim:

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

Experimenta.

-2

Author: WIWIWWIISpitFire, 2013-04-09 12:54:30

score 455 · Accepted Answer

A palavra-chave CSS3 initial define a propriedade CSS3 para o valor inicial, tal como definido na spec. A palavra-chave initial tem amplo suporte do navegador excepto para as Mini famílias IE e Opera.

Uma vez que a falta de suporte do IE pode causar problemas aqui estão algumas das formas de repor algumas propriedades do CSS nos 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;
    }
}

Como mencionado num comentário de @user566245:

Isto é correcto em princípio, mas a quilometragem individual pode variar. Para exemplo alguns elementos como textarea por omissão têm um contorno, a aplicação desta reinicialização irá reduzir o contorno do textarea.

[POST EDIT FEV 4, ' 17] Upvoted for becoming a modern norm, user Joost

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

Exemplo de W3

Para exemplo, se um autor especifica tudo: inicial em um elemento ele irá bloquear toda a herança e repor todas as propriedades, como se não houvesse regras apareceu nos níveis de Autor, utilizador ou agente de Utilizador da cascata.

Isto pode ser útil para o elemento raiz de um" widget " incluído num page, que não deseja herdar os estilos da página externa. Note, no entanto, que qualquer estilo" default " aplicado a esse elemento (como como, por exemplo, visualização: bloco da folha de estilo UA em elementos de bloco tal as) também será soprado para longe.

JAVASCRIPT ? Ninguém pensou em outro além do css para reiniciar o css? Sim?

Há aquele corte completamente relevante: https://stackoverflow.com/a/14791113/845310

GetElementsByTagName ( " *") irá devolver todos os elementos de DOM. Então tu ... pode definir estilos para cada elemento da colecção:

resposta de 9 de fevereiro de 13 às 20: 15 pela VisioN

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

Com tudo dito isto, eu não acho que um reset css é algo viável a menos que terminemos com apenas um navegador web .. se o 'default' for definido pelo navegador no final.

Para comparação, aqui está a lista de valores do Firefox 40.0 para um <blockquote style="all: unset;font-style: oblique"> onde font-style: oblique acciona a operação DOM.

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;