Ik weet zeker dat dit eerder moet worden genoemd / gevraagd, maar op zoek zijn naar een leeftijd zonder geluk, mijn terminologie moet verkeerd zijn!
Ik herinner me vaag een tweet die ik een tijdje geleden zag die suggereerde dat er een CSS-regel beschikbaar was die alle stijlen die eerder in de stylesheet voor een bepaald element in de stylesheet zou worden verwijderd.
Een goed gebruiksvoorbeeld kan in een mobiele-eerste RWD-site zijn waar veel van de styling die wordt gebruikt voor een bepaald element in de weergaven op het kleine scherm nodig heeft ‘het opnieuw instellen’ of het verwijderen van hetzelfde element in het desktopweergave.
Een CSS-regel die zoiets zou kunnen bereiken:
.element {
all: none;
}
Voorbeeld Gebruik:
/* 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;
}
}
zodat we het styling snel konden verwijderen of opnieuw instellen zonder dat we elke accommodatie moeten verklaren.
is logisch?
1, Autoriteit 100%
Het CSS3-trefwoord initialStelt de CSS3-onroerend goed aan de initiële waarde zoals gedefinieerd in de spec . De initialtrefwoord heeft brede browser ondersteuning behalve voor de dwz en Opera Mini-families.
Aangezien het gebrek aan ondersteuning van IE hiervan de kwestie kan veroorzaken, zijn enkele van de manieren om enkele CSS-eigenschappen naar hun initiële waarden te resetten:
.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;
}
}
- Releving van GitHub repo met een december 2017 meer exaustieve lijst
- gerelateerd
- gerelateerd aan MDN
- gerelateerde W3C specs
Zoals vermeld in een reactie door @ user566245:
Dit is in principe correct, maar individuele kilometers kan variëren. Voor
Voorbeeld bepaalde elementen zoals Textarea Standaard hebben een rand,
Het toepassen van deze reset maakt die grens van die Textarea minder.
JavaScript?
Niemand dacht aan andere dan CSS om CSS te resetten? Ja?
Er is die snip volledig relevant: https://stackoverflow.com/a/14791113/845310
GetelementsByTagName (“*”) retourneert alle elementen van DOM. Dan jij
kan stijlen voor elk element in de collectie instellen:
Beantwoord 9 feb 9 ’13 om 20:15 bij Vision
var allElements = document.getElementsByTagName("*");
for (var i = 0, len = allElements.length; i < len; i++) {
var element = allElements[i];
// element.style.border = ...
}
Met dit alles gezegd; ik denk niet dat een css-reset haalbaar is, tenzij we eindigen met slechts één webbrowser .. als de ‘standaard’ uiteindelijk door de browser wordt ingesteld.
Ter vergelijking: hier is de Firefox 40.0-waardenlijst voor a
<blockquote style="all: unset;font-style: oblique">waarbij font-style: obliquede DOM-bewerking activeert.
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;
Antwoord 2, autoriteit 31%
Voor toekomstige lezers. Ik denk dat dit de bedoeling was, maar momenteel niet echt breed wordt ondersteund (zie hieronder):
CSS:
#someselector {
all: initial;
}
#someselector * {
all: unset
}
SCSS:
#someselector {
all: initial;
* {
all: unset;
}
}
- Ondersteund in (bron):
Chrome 37, Edge 79, Firefox 27, IE 11, Opera 24, Safari 9.1, WebView Android 37, Chrome Android 37, Firefox voor Android 27, Opera Android 24, Safari op iOS 9.3, Samsung Internet 3.0 - Niet ondersteund: Internet Explorer
Antwoord 3, autoriteit 9%
Er is een gloednieuwe oplossing gevonden voor dit probleem.
Gebruik all: revertof all: unset.
Van MDN:
Het revert-sleutelwoord werkt in veel gevallen precies hetzelfde als unset. De
het enige verschil is voor eigenschappen waarvan de waarden zijn ingesteld door de browser
of door aangepaste stylesheets gemaakt door gebruikers (ingesteld aan de browserzijde).Je hebt “Er is een CSS-regel nodig die alle stijlen zou verwijderen die eerder in de stylesheet voor een bepaald element waren ingesteld.”
Dus als het element een klassenaam heeft zoals remove-all-styles:
Bijvoorbeeld:
HTML:
<div class="remove-all-styles other-classe another-class">
<!-- content -->
<p class="text-red other-some-styles"> My text </p>
</div>
Met CSS:
.remove-all-styles {
all: revert;
}
Reset alle stijlen die zijn toegepast door other-class, another-classen alle andere overgenomen en toegepaste stijlen op die div.
Of in jouw geval:
/* 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;
}
}
Zal doen.
Hier hebben we een coole CSS-eigenschap gebruikt met een andere coole CSS-waarde.
revertEigenlijk
revert, zoals de naam al zegt, zet die eigenschap terug naar zijn
user- of user-agent-stijl.
allEn als we
revertgebruiken met de eigenschapall, worden alle CSS-eigenschappen
toegepast op dat element worden teruggezet naar user/user-agent stijlen.
Klik hier om te weten verschil tussen auteur, gebruiker, user-agent stijlen.
Bijvoorbeeld: als we ingesloten widgets/componenten willen isoleren van de stijlen van de pagina die ze bevat, kunnen we schrijven:
.isolated-component {
all: revert;
}
Hiermee worden alle author styles(dwz ontwikkelaars-CSS) teruggezet naar user styles(stijlen die een gebruiker van onze website heeft ingesteld – minder waarschijnlijk scenario) of naar user-agentstijlen zichzelf als er geen gebruikersstijlen zijn ingesteld.
Meer details hier: https://developer.mozilla.org/ nl-NL/docs/Web/CSS/revert
En het enige probleem is de ondersteuning: alleen Safari 9.1 en iOS Safari 9.3 hebben ondersteuning voor revertwaarde op het moment van schrijven.
Dus ik zeg: gebruik deze stijl en val terug op andere antwoorden.
Antwoord 4, autoriteit 4%
Laat me deze vraag grondig beantwoorden, want het is al een aantal jaren een bron van pijn voor mij en heel weinig mensen begrijpen het probleem echt en waarom het belangrijk is dat het wordt opgelost. Als ik überhaupt verantwoordelijk zou zijn voor de CSS-specificatie, zou ik me eerlijk gezegd schamen omdat ik dit de afgelopen tien jaar niet heb aangepakt.
Het probleem
Je moet opmaak in een HTML-document invoegen en het moet er op een bepaalde manier uitzien. Bovendien bent u geen eigenaar van dit document, dus u kunt bestaande stijlregels niet wijzigen. Je hebt geen idee wat de stylesheets kunnenzijn, of waarin ze kunnen veranderen.
Gebruiksvoorbeelden hiervoor zijn wanneer u een weer te geven component levert voor onbekende websites van derden om te gebruiken. Voorbeelden hiervan zijn:
- Een advertentietag
- Een browserextensie bouwen die inhoud invoegt
- Elk type widget
Eenvoudigste oplossing
Zet alles in een iframe. Dit heeft zijn eigen beperkingen:
- Cross-domeinbeperkingen: uw inhoud heeft helemaal geen toegang tot het originele document. U kunt geen inhoud over elkaar leggen, de DOM wijzigen, enz.
- Weergavebeperkingen: uw inhoud is opgesloten in een rechthoek.
Als uw inhoud in een kader past, kunt u probleem #1 omzeilen door uw inhoud een iframe te laten schrijven en de inhoud expliciet in te stellen, waardoor het probleem wordt omzeild, aangezien het iframe en document zal hetzelfde domein delen.
CSS-oplossing
Ik heb overal gezocht naar de oplossing hiervoor, maar die is er helaas niet. Het beste wat u kunt doen, is expliciet alle mogelijke eigenschappen die kunnen worden overschreven, overschrijven en ze overschrijven tot wat u denktdat hun standaardwaarde zou moeten zijn.
Zelfs wanneer u opheft, is geen manier om ervoor te zorgen dat een meer gerichte CSS-regel de uwe niet overschrijft . Het beste dat u hier kunt doen is om uw opheffingsregels doel zo specifiek mogelijk te hebben en hopen dat het bovenliggende document niet per ongeluk het beste is: gebruik een obscure of willekeurige ID op het ouderelement van uw inhoud en gebruik van de definities van uw inhoud! .
5
Nog een manieren:
1) Inclusief de CSS-code (bestand) van Yahoo CSS-reset en plaats alles in deze div:
<div class="yui3-cssreset">
<!-- Anything here would be reset-->
</div>
2) of gebruik
- https://cssreset.com/scripts/vanilla-css-un- reset /
- https://cssreset.com/scripts/html5-doctor- CSS-reset-stylesheet /
- https://cssreset.com/scripts/ic-meyer-reset- CSS /
- https://cssreset.com/scripts/tripoli- Reset-David-Hellsing /
- https://cssreset.com/scripts/normalize-css/
6
Als u toevallig Sass in een buildsysteem gebruikt, moet u dit een manier om in alle belangrijke browsers te doen, om al uw invoer in te wikkelen met een: niet () selector zoals SO …
:not(.disable-all-styles) {
@import 'my-sass-file';
@import 'my-other-sass-file';
}
Dan kunt u de schakelklasse op een container gebruiken en heeft de subcontent geen van uw stijlen.
<div class="disable-all-styles">
<p>Nothing in this div is affected by my sass styles.</p>
</div>
Natuurlijk zullen al uw stijlen nu worden bereid met de: NOT () selector, dus het is een beetje fugly, maar werkt goed.
Antwoord 7
Ik raad af om het antwoord te gebruiken dat hier als correct is gemarkeerd. Het is een enorme klodder CSS die alles probeert te dekken.
Ik stel voor dat je per geval evalueert hoe je de stijl van een element kunt verwijderen.
Stel dat je voor SEO-doeleinden een H1 moet opnemen op een pagina die geen echte kop in het ontwerp heeft. Misschien wil je van de navigatielink van die pagina een H1 maken, maar je wilt natuurlijk niet dat die navigatielink als een gigantische H1 op de pagina wordt weergegeven.
Wat u moet doen, is dat element in een h1-tag wikkelen en het inspecteren. Bekijk welke CSS-stijlen specifiek worden toegepast op het h1-element.
Stel dat ik de volgende stijlen zie toegepast op het element.
//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;
}
Nu moet je de exacte stijl bepalen die op de H1 wordt toegepast en deze uitschakelen in een CSS-klasse. Dit zou er ongeveer als volgt uitzien:
.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;
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;
}
Dit is veel overzichtelijker en dumpt niet zomaar een willekeurige klodder code in je css waarvan je niet weet wat het doet.
Je kunt deze les nu toevoegen aan je h1
<h1 class="no-style-h1">
Title
</h1>
Antwoord 8
U noemde mobiele-eerste sites … voor een responsief ontwerp, het is zeker mogelijk om kleine schermstijlen met grote schermstijlen te negeren. Maar misschien hoeft het niet.
Probeer dit:
.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. */
}
}
Die media-query’s overlappen elkaar niet, dus hun regels negeren elkaar niet. Dit maakt het gemakkelijker om elke reeks stijlen afzonderlijk te handhaven.
9
betere oplossing
Stylesheet “kopiëren / plakken” downloaden om CSS-eigenschappen opnieuw in te stellen naar standaard (UA-stijl):
https://github.com/monmomo04/resetcs.git
Bedankt @ Milche Patern!
Ik was erg op zoek naar reset / standaard stijl-eigenschappenwaarde. Mijn eerste poging was om de berekende waarde te kopiëren uit het browser dev-tool van het root (HTML) -element. Maar zoals het berekend zou zijn, zou het op elk systeem anders hebben gekeken / gewerkt.
Voor degenen die een browsercrash tegenkomen bij het proberen om de asterisk * te gebruiken om de stijl van de kinderenelementen opnieuw in te stellen, en terwijl ik wist dat het niet voor u werkte, heb ik de Asterisk “*” vervangen door alle HTML-tags-naam in plaats daarvan . De browser crashte niet; Ik ben op chroom versie 46.0.2490.71 m.
Ten slotte is het goed om te vermelden dat deze eigenschappen de stijl zullen resetten naar de standaardstijl van het bovenste root-element, maar niet naar de initiële waarde voor elk HTML-element. Dus om dit te corrigeren, heb ik de “user-agent”-stijlen van een op webkit gebaseerde browser genomen en deze geïmplementeerd onder de klasse “reset-this”.
Handige link:
Download “copy/paste” stylesheet om css-eigenschappen terug te zetten naar de standaard (UA-stijl):
https://github.com/monmomo04/resetCss.git
Gebruiker-agentstijl:
Standaard-CSS van browsers voor HTML-elementen
http://trac.webkit.org/browser/trunk/ Bron/WebCore/css/html.css
Css-specificatie (let op specificiteit):
https://css-tricks.com/specifics-on-css-specificity/
https://github.com/monmomo04/resetCss.git
Antwoord 10
In mijn specifieke scenario wilde ik het toepassen van algemene stijlen op een specifiek deel van de pagina, beter geïllustreerd als volgt, overslaan:
<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>
Na te hebben geknoeid met het resetten van CSS, wat niet veel succes opleverde (vooral vanwege de voorrang van regels en de complexe hiërarchie van stylesheets), bracht de alomtegenwoordige jQuery te hulp, die het werk heel snel en redelijk vuil deed:
$(function() {
$('body').removeClass('common-styles');
$('#header,#footer').addClass('common-styles');
});
(Vertel eens hoe slecht het is om JS te gebruiken om met CSS om te gaan 🙂 )
Antwoord 11
Voor degenen onder u die proberen uit te vinden hoe u de styling daadwerkelijk alleen van het element kunt verwijderen, zonder de css uit de bestanden te verwijderen, deze oplossing werkt met jQuery:
$('.selector').removeAttr('style');
Antwoord 12
als je je CSS instelt binnen klassen,
je kunt ze gemakkelijk verwijderen met de jQuery removeClass()-methode.
De onderstaande code verwijdert .element class:
<div class="element">source</div>
<div class="destination">destination</div>
<script>
$(".element").removeClass();
</script>
Als er geen parameter is opgegeven, wordt deze methode verwijderd
ALLE klassenamen van de geselecteerde elementen.
Antwoord 13
Als iemand hier komt op zoek naar een antwoord dat gebruikmaakt van iframe, dan is het hier
<iframe srcdoc="<html><body>your-html-here</body></html>" />
https://caniuse.com/iframe-srcdoc
Antwoord 14
Is er een kans dat u op zoek bent naar de !important regel? Het maakt niet alle declaraties ongedaan, maar het biedt een manier om ze te negeren.
“Als een !important-regel wordt gebruikt op een stijldeclaratie, overschrijft deze declaratie alle andere declaraties die in de CSS zijn gemaakt, waar deze zich ook in de declaratielijst bevinden. Hoewel !important niets met specificiteit te maken heeft.”
https://developer.mozilla.org/en- VS/docs/CSS/Specificity#The_!important_exception