Zurücksetzen / Entfernen von CSS-Stilen nur für Elemente

Ich bin mir sicher, dass dies schon einmal erwähnt / gefragt wurde, aber ich habe nach einem Alter ohne Glück gesucht, meine Terminologie muss falsch sein!

Ich erinnere mich vage an einen Tweet, den ich vor einiger Zeit gesehen habe und der darauf hinwies, dass eine CSS-Regel verfügbar war, mit der alle zuvor im Stylesheet für ein bestimmtes Element festgelegten Stile entfernt wurden.

Ein gutes Anwendungsbeispiel könnte eine Mobile-First-RWD-Site sein, bei der ein Großteil des für ein bestimmtes Element in den Kleinbildschirmansichten verwendeten Stils für dasselbe Element in der Desktopansicht zurückgesetzt oder entfernt werden muss.

Eine CSS-Regel, die etwas erreichen könnte wie:

.element {
  all: none;
}

Anwendungsbeispiel:

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

So konnten wir das Styling schnell entfernen oder neu einstellen, ohne jede Eigenschaft deklarieren zu müssen.

Macht Sinn?

Das Schlüsselwort CSS3 initialsetzt die CSS3-Eigenschaft auf den in der Spezifikation definierten Anfangswert . Das initialSchlüsselwort bietet eine breite Browserunterstützung mit Ausnahme der IE- und Opera Mini-Familien.

Da die mangelnde Unterstützung des IE hier zu Problemen führen kann, können Sie einige CSS-Eigenschaften auf ihre ursprünglichen Werte zurücksetzen:

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

• Relevent Github Repo mit einer exaustiveren Liste im Dezember 2017
• verbunden
• Verwandt von MDN
• Verwandte W3C-Spezifikationen

Wie in einem Kommentar von @ user566245 erwähnt:

Dies ist im Prinzip richtig, aber die einzelnen Kilometer können variieren. Beispielsweise haben bestimmte Elemente wie Textbereich standardmäßig einen Rahmen. Wenn Sie diesen Reset anwenden, wird der Rand dieses Textbereichs geringer.

[POST EDIT FEB 4, '17] Benutzer Joost wurde als moderne Norm eingestuft

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

BEISPIEL AUS W3

Wenn ein Autor beispielsweise all: initial für ein Element angibt, blockiert er die gesamte Vererbung und setzt alle Eigenschaften zurück, als ob in den Ebenen Autor, Benutzer oder Benutzeragent der Kaskade keine Regeln angezeigt würden.

Dies kann für das Stammelement eines in einer Seite enthaltenen "Widgets" nützlich sein, das die Stile der äußeren Seite nicht erben möchte. Beachten Sie jedoch, dass jeder auf dieses Element angewendete "Standard" -Stil (z. B. display: block aus dem UA-Stylesheet für Blockelemente wie z. B.) ebenfalls weggeblasen wird.

JAVASCRIPT?

Niemand dachte an etwas anderes als CSS, um CSS zurückzusetzen? Ja?

Dieser Snip ist vollständig relevant: https://stackoverflow.com/a/14791113/845310

getElementsByTagName ("*") gibt alle Elemente aus DOM zurück. Anschließend können Sie Stile für jedes Element in der Sammlung festlegen:

beantwortet 9. Februar 13 um 20:15 von VisioN

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

Mit all dem gesagt; Ich denke nicht, dass ein CSS-Reset machbar ist, es sei denn, wir haben nur einen Webbrowser. Wenn der 'Standard' am Ende vom Browser festgelegt wird.

Zum Vergleich finden Sie hier die Firefox 40.0-Werteliste für einen Ort, an <blockquote style="all: unset;font-style: oblique">dem font-style: obliquedie DOM-Operation ausgelöst wird.

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;

Für zukünftige Leser. Ich denke, das war gemeint, wird aber derzeit nicht wirklich umfassend unterstützt (siehe unten):

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

• Unterstützt in ( Quelle ): Chrome 37, Firefox 27, IE 11, Opera 24
• Nicht unterstützt: Safari

Es gibt eine brandneue Lösung für dieses Problem.

Verwenden Sie all: revertoder all: unset.

Von MDN:

Das Schlüsselwort "Zurücksetzen" funktioniert in vielen Fällen genauso wie "Nicht gesetzt". Der einzige Unterschied besteht bei Eigenschaften, deren Werte vom Browser oder von benutzerdefinierten Stylesheets festgelegt wurden, die von Benutzern erstellt wurden (auf der Browserseite festgelegt).

Sie benötigen "Eine verfügbare CSS-Regel, mit der alle zuvor im Stylesheet für ein bestimmtes Element festgelegten Stile entfernt werden."

Wenn das Element also einen Klassennamen hat wie remove-all-styles:

Z.B:

HTML:

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

Mit CSS:

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

Werden alle Arten zurückgesetzt aufgebracht durch other-class, another-classund alle anderen geerbt und angewendet Stile , dass div.

Oder in Ihrem Fall:

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

Wird besorgt.

Hier haben wir eine coole CSS-Eigenschaft mit einem anderen coolen CSS-Wert verwendet.

1. revert

Eigentlich revert, wie der Name schon sagt, kehrt diese Eigenschaft auf den Benutzer oder User-Agent - Stil.

2. all

Wenn wir revertdie allEigenschaft verwenden, werden alle auf dieses Element angewendeten CSS-Eigenschaften auf Benutzer- / Benutzeragentenstile zurückgesetzt.

Klicken Sie hier, um den Unterschied zwischen Autoren-, Benutzer- und Benutzeragentenstilen zu ermitteln.

Zum Beispiel: Wenn wir eingebettete Widgets / Komponenten von den Stilen der Seite, die sie enthält , isolieren möchten , könnten wir schreiben:

.isolated-component {
 all: revert;
}

Dadurch werden alle author styles(dh Entwickler-CSS) auf user styles(Stile, die ein Benutzer unserer Website festgelegt hat - weniger wahrscheinliches Szenario) oder auf user-agentStile selbst zurückgesetzt, wenn keine Benutzerstile festgelegt sind.

Weitere Details hier: https://developer.mozilla.org/en-US/docs/Web/CSS/revert

Das einzige Problem ist die Unterstützung : Nur Safari 9.1 und iOS Safari 9.3 unterstützenrevert Zeitpunkt des Schreibens den Wert.

Also werde ich sagen, benutze diesen Stil und greife auf andere Antworten zurück.

Lassen Sie mich diese Frage gründlich beantworten, denn sie ist seit mehreren Jahren eine Schmerzquelle für mich und nur sehr wenige Menschen verstehen das Problem wirklich und warum es wichtig ist, dass es gelöst wird. Wenn ich überhaupt für die CSS-Spezifikation verantwortlich wäre, wäre es mir ehrlich gesagt peinlich, dass ich dies im letzten Jahrzehnt nicht angesprochen habe.

Das Problem

Sie müssen Markup in ein HTML-Dokument einfügen und es muss auf eine bestimmte Weise aussehen. Darüber hinaus besitzen Sie dieses Dokument nicht, sodass Sie vorhandene Stilregeln nicht ändern können. Sie haben keine Ahnung, wie die Stylesheets aussehen könnten oder in was sie sich ändern könnten.

Anwendungsfälle hierfür sind, wenn Sie eine anzeigbare Komponente für unbekannte Websites von Drittanbietern bereitstellen. Beispiele hierfür wären:

1. Ein Anzeigen-Tag
2. Erstellen einer Browser-Erweiterung, die Inhalte einfügt
3. Jede Art von Widget

Einfachste Lösung

Setzen Sie alles in einen Iframe. Dies hat seine eigenen Einschränkungen:

1. Domänenübergreifende Einschränkungen: Ihre Inhalte haben überhaupt keinen Zugriff auf das Originaldokument. Sie können keine Inhalte überlagern, das DOM ändern usw.
2. Anzeigebeschränkungen: Ihr Inhalt ist innerhalb eines Rechtecks ​​gesperrt.

Wenn Ihr Inhalt kann in eine Kiste passen, können Sie Problem # umgehen 1 durch Ihre Inhalte schreiben iframe hat und ausdrücklich den Inhalt gesetzt, so dass die Ausgabe Fußleisten um, da die iframe und Dokument die gleiche Domain freigeben.

CSS-Lösung

Ich habe weit und breit nach der Lösung dafür gesucht, aber es gibt leider keine. Das Beste, was Sie tun können, ist, alle möglichen Eigenschaften, die überschrieben werden können, explizit zu überschreiben und sie auf den Wert zu überschreiben, den Sie für ihren Standardwert halten.

Selbst wenn Sie überschreiben, gibt es keine Möglichkeit sicherzustellen, dass eine gezieltere CSS-Regel Ihre nicht überschreibt . Das Beste, was Sie hier tun können, ist, Ihre Überschreibungsregeln so spezifisch wie möglich anzuvisieren und zu hoffen, dass das übergeordnete Dokument es nicht versehentlich am besten kann: Verwenden Sie eine obskure oder zufällige ID für das übergeordnete Element Ihres Inhalts und verwenden Sie! Important für alle Eigenschaftswertdefinitionen .

andere Möglichkeiten:

1) Fügen Sie den CSS- Code (Datei) des Yahoo CSS-Resets hinzu und fügen Sie dann alles in dieses DIV ein:

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

2) oder verwenden

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

Ich empfehle nicht, die Antwort zu verwenden, die hier als richtig markiert wurde. Es ist ein riesiger CSS-Blob, der versucht, alles abzudecken.

Ich würde vorschlagen, dass Sie bewerten, wie der Stil von Fall zu Fall aus einem Element entfernt wird.

Nehmen wir an, für SEO-Zwecke müssen Sie ein H1 auf einer Seite einfügen, die keine tatsächliche Überschrift im Design hat. Möglicherweise möchten Sie den Navigationslink dieser Seite zu einem H1 machen, aber natürlich möchten Sie nicht, dass dieser Navigationslink als riesiger H1 auf der Seite angezeigt wird.

Sie sollten dieses Element in ein h1-Tag einschließen und es überprüfen. Sehen Sie, welche CSS-Stile speziell auf das h1-Element angewendet werden.

Nehmen wir an, ich sehe die folgenden Stile, die auf das Element angewendet werden.

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

Jetzt müssen Sie den genauen Stil, der auf das H1 angewendet wird, genau bestimmen und in einer CSS-Klasse deaktivieren. Dies würde ungefähr so ​​aussehen:

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

Dies ist viel sauberer und speichert nicht nur einen zufälligen Code-Blob in Ihrem CSS, von dem Sie nicht wissen, was er tatsächlich tut.

Jetzt können Sie diese Klasse zu Ihrem h1 hinzufügen

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

Wenn Sie sass in einem Build-System verwenden, besteht eine Möglichkeit, die in allen gängigen Browsern funktioniert, darin, alle Ihre Stilimporte mit einem: not () - Selektor wie folgt zu versehen ...

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

Dann können Sie die Deaktivierungsklasse für einen Container verwenden, und der Unterinhalt enthält keinen Ihrer Stile.

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

Natürlich werden jetzt alle Ihre Stile mit dem Selektor: not () vorangestellt, daher ist es ein wenig flüchtig, funktioniert aber gut.

Sie haben Mobile-First-Sites erwähnt ... Für ein ansprechendes Design ist es sicherlich möglich, Stile mit kleinem Bildschirm durch Stile mit großem Bildschirm zu überschreiben. Aber Sie müssen vielleicht nicht.

Versuche dies:

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

Diese Medienabfragen überschneiden sich nicht, sodass sich ihre Regeln nicht gegenseitig überschreiben. Dies erleichtert die separate Pflege jedes Stilsatzes.

BESSERE LÖSUNG

Laden Sie das Stylesheet "Kopieren / Einfügen" herunter, um die CSS-Eigenschaften auf die Standardeinstellungen (UA-Stil) zurückzusetzen:
https://github.com/monmomo04/resetCss.git

Danke @ Milche Patern!
Ich habe wirklich nach dem Wert für Reset- / Standardstileigenschaften gesucht. Mein erster Versuch war, den berechneten Wert aus dem Browser-Dev-Tool des Root-Elements (HTML) zu kopieren. Aber wie es berechnet wurde, hätte es auf jedem System anders ausgesehen / funktioniert.
Für diejenigen, die beim Versuch, den Stil der untergeordneten Elemente mit dem Sternchen * zurückzusetzen, auf einen Browserabsturz stoßen. Da ich wusste, dass dies bei Ihnen nicht funktioniert hat, habe ich stattdessen das Sternchen "*" durch den Namen aller HTML-Tags ersetzt . Der Browser stürzte nicht ab. Ich bin auf Chrome Version 46.0.2490.71 m.
Zuletzt ist zu erwähnen, dass diese Eigenschaften den Stil auf den Standardstil des obersten Stammelements zurücksetzen, jedoch nicht auf den Anfangswert für jedes HTML-Element. Um dies zu korrigieren, habe ich die "User-Agent" -Stile eines Webkit-basierten Browsers unter der Klasse "reset-this" implementiert.

Laden Sie das Stylesheet "Kopieren / Einfügen" herunter, um die CSS-Eigenschaften auf den Standardwert (UA-Stil) zurückzusetzen:
https://github.com/monmomo04/resetCss.git

User-Agent-Stil:
Standard-CSS des Browsers für HTML-Elemente
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

CSS-Spezifität (achten Sie auf die Spezifität):
https://css-tricks.com/specifics-on-css-specificity/

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

In meinem speziellen Szenario wollte ich das Anwenden allgemeiner Stile auf einen bestimmten Teil der Seite überspringen, besser dargestellt wie folgt:

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

Nach dem Durcheinander mit dem Zurücksetzen von CSS, das nicht viel Erfolg brachte (hauptsächlich aufgrund der Vorrangstellung von Regeln und der komplexen Stylesheet-Hierarchie), wurde allgegenwärtige jQuery zur Rettung gebracht, die die Arbeit sehr schnell und ziemlich schmutzig erledigte:

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

(Sagen Sie jetzt, wie böse es ist, JS zu verwenden, um mit CSS umzugehen :-))

Für diejenigen unter Ihnen, die herausfinden möchten, wie das Styling tatsächlich nur aus dem Element entfernt werden kann, ohne das CSS aus den Dateien zu entfernen, funktioniert diese Lösung mit jquery:

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

Wenn Sie Ihr CSS innerhalb von Klassen festlegen, können Sie diese mithilfe der jQuery removeClass () -Methode einfach entfernen. Der folgende Code entfernt die Elementklasse:

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

Wenn kein Parameter angegeben wird, entfernt diese Methode ALLE Klassennamen aus den ausgewählten Elementen.

Nein, dies ist nur eine Frage der besseren Verwaltung Ihrer CSS-Struktur.

In deinem Fall würde ich meine CSS ungefähr so ​​bestellen:

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

Experimentieren Sie einfach.

Gibt es eine Chance, dass Sie nach der! Wichtigen Regel suchen? Es macht nicht alle Deklarationen rückgängig, bietet jedoch eine Möglichkeit, sie zu überschreiben.

"Wenn eine! Wichtige Regel für eine Stildeklaration verwendet wird, überschreibt diese Deklaration jede andere im CSS abgegebene Deklaration, wo immer sie sich in der Deklarationsliste befindet. Obwohl! Wichtig nichts mit Spezifität zu tun hat."

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