Reimposta / rimuovi gli stili CSS solo per l'elemento

Sono sicuro che questo deve essere stato menzionato / chiesto prima, ma ho cercato un'età senza fortuna, la mia terminologia deve essere sbagliata!

Ricordo vagamente un tweet che ho visto qualche tempo fa che suggeriva che era disponibile una regola CSS che avrebbe rimosso tutti gli stili precedentemente impostati nel foglio di stile per un elemento particolare.

Un buon esempio potrebbe essere in un sito RWD mobile-first in cui gran parte dello stile utilizzato per un particolare elemento nelle viste a schermo piccolo deve essere "ripristinato" o rimosso per lo stesso elemento nella vista desktop.

Una regola CSS che potrebbe raggiungere qualcosa di simile:

.element {
  all: none;
}

Esempio di utilizzo:

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

Quindi potremmo rimuovere o reimpostare rapidamente lo stile senza dover dichiarare ogni proprietà.

Ha senso?

La parola chiave CSS3 initialimposta la proprietà CSS3 sul valore iniziale come definito nelle specifiche . La initialparola chiave ha un ampio supporto per il browser ad eccezione delle famiglie IE e Opera Mini.

Poiché la mancanza di supporto di IE può causare problemi, ecco alcuni dei modi in cui è possibile ripristinare alcune proprietà CSS ai loro valori iniziali:

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

• Relativo repository github con un elenco più esaustivo di dicembre 2017
• Relazionato
• Relativo a MDN
• Specifiche W3C correlate

Come menzionato in un commento di @ user566245:

questo è corretto in linea di principio, ma il chilometraggio individuale può variare. Ad esempio alcuni elementi come textarea per impostazione predefinita hanno un bordo, l'applicazione di questo ripristino ridurrà il bordo di tali textarea.

[POST EDIT FEB 4, '17] È stato votato per diventare una norma moderna, l'utente Joost

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

ESEMPIO DA W3

Ad esempio, se un autore specifica tutto: iniziale su un elemento bloccherà tutta l'ereditarietà e reimposterà tutte le proprietà, come se non apparissero regole nei livelli autore, utente o user-agent della cascata.

Questo può essere utile per l'elemento radice di un "widget" incluso in una pagina, che non desidera ereditare gli stili della pagina esterna. Si noti, tuttavia, che qualsiasi stile "predefinito" applicato a quell'elemento (come, ad esempio, display: blocco dal foglio di stile UA su elementi di blocco come) verrà spazzato via.

JAVASCRIPT?

Nessuno ha pensato a altro che CSS per ripristinare CSS? Sì?

C'è quella cimice pienamente pertinente: https://stackoverflow.com/a/14791113/845310

getElementsByTagName ("*") restituirà tutti gli elementi da DOM. Quindi puoi impostare gli stili per ciascun elemento nella raccolta:

ha risposto 9 febbraio 13 alle 20:15 da VisioN

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

Con tutto ciò detto; non penso che un ripristino CSS sia qualcosa di fattibile a meno che non finiamo con un solo browser Web. Se il "default" è impostato dal browser alla fine.

Per un confronto, ecco l'elenco dei valori di Firefox 40.0 per un <blockquote style="all: unset;font-style: oblique">dove si font-style: obliqueavvia l'operazione 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;

Per i futuri lettori. Penso che questo sia ciò che intendevo, ma al momento non è supportato molto ampiamente (vedi sotto):

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

• Supportato in ( fonte ): Chrome 37, Firefox 27, IE 11, Opera 24
• Non supportato: Safari

È stata trovata una nuova soluzione a questo problema.

Usa all: reverto all: unset.

Da MDN:

La parola chiave ripristina funziona esattamente come non impostata in molti casi. L'unica differenza è per le proprietà che hanno valori impostati dal browser o da fogli di stile personalizzati creati dagli utenti (impostati sul lato browser).

È necessario "Una regola CSS disponibile che rimuova tutti gli stili precedentemente impostati nel foglio di stile per un particolare elemento."

Quindi, se l'elemento ha un nome di classe come remove-all-styles:

Per esempio:

HTML:

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

Con CSS:

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

Resetterà tutti gli stili applicati da other-class, another-classe tutti gli altri ereditato e stili applicati a questo div.

O nel tuo 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;
  }
}

Andrà bene.

Qui abbiamo usato una proprietà CSS interessante con un altro valore CSS interessante.

1. revert

In realtà revert, come dice il nome, ripristina quella proprietà al suo stile utente o agente utente.

2. all

E quando usiamo revertcon la allproprietà, tutte le proprietà CSS applicate a quell'elemento verranno ripristinate agli stili utente / agente utente.

Fai clic qui per conoscere la differenza tra stili autore, utente, agente utente.

Ad esempio: se vogliamo isolare widget / componenti incorporati dagli stili della pagina che li contiene , potremmo scrivere:

.isolated-component {
 all: revert;
}

Il che ripristinerà tutti author styles(cioè i CSS dello sviluppatore) in user styles(stili impostati da un utente del nostro sito Web - scenario meno probabile) o user-agentstili stessi se non vengono impostati stili utente.

Maggiori dettagli qui: https://developer.mozilla.org/en-US/docs/Web/CSS/revert

E l'unico problema è il supporto : solo Safari 9.1 e iOS Safari 9.3 hanno il supporto per il revertvalore al momento della scrittura.

Quindi dirò usare questo stile e il fallback per qualsiasi altra risposta.

Permettetemi di rispondere a questa domanda in modo approfondito, perché è stata una fonte di dolore per me per diversi anni e pochissime persone capiscono davvero il problema e perché è importante risolverlo. Se fossi assolutamente responsabile delle specifiche CSS sarei imbarazzato, francamente, per non aver affrontato questo problema nell'ultimo decennio.

Il problema

Devi inserire il markup in un documento HTML e deve apparire in un modo specifico. Inoltre, non si possiede questo documento, quindi non è possibile modificare le regole di stile esistenti. Non hai idea di cosa potrebbero essere i fogli di stile o su cosa potrebbero cambiare.

I casi d'uso per questo sono quando si fornisce un componente visualizzabile per siti Web di terzi sconosciuti da utilizzare. Esempi di questo sarebbero:

1. Un tag annuncio
2. Creazione di un'estensione del browser che inserisce contenuto
3. Qualsiasi tipo di widget

Correzione più semplice

Metti tutto in un iframe. Questo ha il suo set di limitazioni:

1. Limitazioni tra domini: i tuoi contenuti non avranno affatto accesso al documento originale. Non è possibile sovrapporre contenuti, modificare il DOM, ecc.
2. Limitazioni di visualizzazione: il contenuto è bloccato all'interno di un rettangolo.

Se il contenuto può essere contenuto in una casella, è possibile aggirare il problema n. 1 facendo in modo che il contenuto scriva un iframe e imposti esplicitamente il contenuto, evitando così il problema, poiché iframe e il documento condivideranno lo stesso dominio.

Soluzione CSS

Ho cercato in lungo e in largo la soluzione a questo, ma purtroppo non ce ne sono. Il meglio che puoi fare è sovrascrivere esplicitamente tutte le possibili proprietà che possono essere sovrascritte e sovrascriverle a ciò che pensi debba essere il loro valore predefinito.

Anche quando si esegue l'override, non è possibile garantire che una regola CSS più mirata non prevalga sulla propria . Il meglio che puoi fare qui è avere le tue regole di override come target nel modo più specifico possibile e spero che il documento principale non lo accada accidentalmente: usa un ID oscuro o casuale sull'elemento genitore del tuo contenuto e usa! Important su tutte le definizioni di valore di proprietà .

altri modi:

1) includi il codice css (file) di Yahoo CSS reset e poi metti tutto all'interno di questo DIV:

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

2) o utilizzare

• 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/

Non consiglio di usare la risposta che è stata contrassegnata come corretta qui. È un'enorme quantità di CSS che cerca di coprire tutto.

Suggerirei di valutare come rimuovere lo stile da un elemento in base al caso.

Diciamo per scopi SEO che è necessario includere un H1 in una pagina che non ha un'intestazione effettiva nel design. Potresti voler rendere il collegamento di navigazione di quella pagina un H1 ma ovviamente non vuoi che quel collegamento di navigazione venga visualizzato come un gigante H1 sulla pagina.

Quello che dovresti fare è avvolgere quell'elemento in un tag h1 e controllarlo. Scopri quali stili CSS vengono applicati in modo specifico all'elemento h1.

Diciamo che vedo i seguenti stili applicati all'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;
}

Ora è necessario individuare lo stile esatto che vengono applicati a H1 e annullarli in una classe CSS. Questo sarebbe simile al seguente:

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

Questo è molto più pulito e non solo scarica una chiazza casuale di codice nel tuo CSS che non sai cosa sta realmente facendo.

Ora puoi aggiungere questa classe al tuo h1

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

Se ti capita di usare sass in un sistema di compilazione, un modo per farlo che funzionerà in tutti i principali browser è di avvolgere tutte le tue importazioni di stile con un selettore: not () in questo modo ...

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

Quindi puoi utilizzare la classe di disabilitazione su un contenitore e il contenuto secondario non avrà nessuno dei tuoi stili.

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

Ovviamente tutti i tuoi stili ora saranno anteposti con il selettore: not (), quindi è un po 'fugace, ma funziona bene.

Hai citato i siti mobili per primi ... Per un design reattivo, è sicuramente possibile sostituire gli stili a schermo piccolo con stili a schermo grande. Ma potresti non averne bisogno.

Prova questo:

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

Quelle query multimediali non si sovrappongono, quindi le loro regole non si sovrappongono. Ciò semplifica la gestione separata di ogni set di stili.

MIGLIORE SOLUZIONE

Scarica il foglio di stile "copia / incolla" per ripristinare le proprietà CSS ai valori predefiniti (stile UA):
https://github.com/monmomo04/resetCss.git

Grazie @ Milche Patern!
Stavo davvero cercando il valore delle proprietà di stile reset / default. Il mio primo tentativo è stato quello di copiare il valore calcolato dallo strumento Dev del browser dell'elemento root (html). Ma come calcolato, avrebbe avuto un aspetto / un funzionamento diverso su ogni sistema.
Per coloro che riscontrano un arresto anomalo del browser durante il tentativo di utilizzare l'asterisco * per ripristinare lo stile degli elementi figlio e poiché sapevo che non funzionava per te, ho sostituito l'asterisco "*" con il nome di tutti i tag HTML . Il browser non si è arrestato in modo anomalo; Sono su Chrome versione 46.0.2490.71 m.
Infine, è bene ricordare che tali proprietà reimposteranno lo stile sullo stile predefinito dell'elemento radice più in alto ma non sul valore iniziale per ciascun elemento HTML. Quindi, per correggere questo, ho preso gli stili "user-agent" del browser basato su webkit e l'ho implementato nella classe "reset-this".

Scarica il foglio di stile "copia / incolla" per ripristinare le proprietà CSS predefinite (stile UA):
https://github.com/monmomo04/resetCss.git

Stile agente utente:
CSS predefinito del browser per elementi HTML
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

Css specificità (prestare attenzione alla specificità):
https://css-tricks.com/specifics-on-css-specificity/

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

Nel mio scenario specifico volevo saltare l'applicazione di stili comuni a una parte specifica della pagina, meglio illustrata in questo modo:

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

Dopo aver pasticciato con il ripristino del CSS che non ha portato molto successo (principalmente a causa della precedenza delle regole e della complessa gerarchia dei fogli di stile), ha portato in soccorso l'onnipresente jQuery, che ha svolto il lavoro molto rapidamente e ragionevolmente sporco:

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

(Ora dì quanto è male usare JS per gestire i CSS :-))

Per quelli di voi che cercano di capire come rimuovere effettivamente lo stile solo dall'elemento, senza rimuovere il CSS dai file, questa soluzione funziona con jquery:

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

se si imposta il CSS all'interno delle classi, è possibile rimuoverlo facilmente utilizzando il metodo jQuery removeClass (). Il codice seguente rimuove la classe .element:

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

Se non viene specificato alcun parametro, questo metodo rimuoverà TUTTI i nomi delle classi dagli elementi selezionati.

No, si tratta solo di gestire meglio la tua struttura CSS.

Nel tuo caso vorrei ordinare al mio CSS qualcosa del genere:

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

Sperimenta e basta.

Qualche possibilità stai cercando la! Regola importante? Non annulla tutte le dichiarazioni ma fornisce un modo per sovrascriverle.

"Quando una regola importante viene utilizzata su una dichiarazione di stile, questa dichiarazione sostituisce qualsiasi altra dichiarazione fatta nel CSS, ovunque si trovi nell'elenco delle dichiarazioni. Sebbene,! Important non abbia nulla a che fare con la specificità."

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