Wie man CSS-Stile für ein bestimmtes Element oder nur einen Selektor zurücksetzt/entfernt

Question

Gibt es eine verfügbare CSS-Regel, die alle zuvor im Stylesheet für ein bestimmtes Element festgelegten Styles entfernt?

Ein gutes Beispiel für die Verwendung könnte auf einer mobile-first RWD-Website liegen, wo ein Großteil des Stylings, das für ein bestimmtes Element in den Ansichten mit kleinem Bildschirm verwendet wird, für dasselbe Element in der Desktop-Ansicht 'zurückgesetzt' oder entfernt werden muss.

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

.element {
  all: none;
}

Beispiel für die Verwendung:

/* 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 könnten wir schnell das Styling entfernen oder zurücksetzen, ohne jede Eigenschaft einzeln deklarieren zu müssen.

Answer 1

Wenn Sie zufällig SASS in einem Build-System verwenden, besteht eine Möglichkeit, dies zu tun, die in allen gängigen Browsern funktioniert, darin, alle Ihre Style-Imports mit einem :not() Selector wie folgt zu umgeben...

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

Dann können Sie die disable-Klasse auf einem Container verwenden und der Unterinhalt wird keine Ihrer Styles haben.

  Nichts in diesem Div ist von meinen Sass-Styles betroffen.

Natürlich werden jetzt alle Ihre Styles mit dem :not() Selector vorangestellt, also sieht es etwas unschön aus, aber funktioniert gut.

Answer 2

Ich empfehle nicht, die hier als korrekt markierte Antwort zu verwenden. Es handelt sich um einen riesigen Block von CSS, der versucht, alles abzudecken.

Ich würde vorschlagen, dass Sie darüber nachdenken, wie Sie den Stil von einem Element auf einer Fall-für-Fall-Basis entfernen können.

Angenommen, aus SEO-Gründen müssen Sie auf einer Seite, die kein tatsächliches Überschriftselement im Design hat, ein H1 einfügen. Sie könnten den Navigationslink dieser Seite zu einem H1 machen, aber natürlich möchten Sie nicht, dass dieser Navigationslink auf der Seite als riesiges H1 angezeigt wird.

Was Sie tun sollten, ist dieses Element in ein h1-Tag einzuschließen und es zu inspizieren. Sehen Sie, welche CSS-Stile speziell auf das h1-Element angewendet werden.

Angenommen, 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 herausfinden, der auf das H1 angewendet wird, und sie in einer CSS-Klasse aufheben. Das 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;
    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 wirft nicht einfach einen zufälligen Block von Code in Ihr CSS, von dem Sie nicht wissen, was er eigentlich tut.

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

     Titel

Answer 3

In meinem speziellen Szenario wollte ich das Anwenden von gemeinsamen Stilen auf einen bestimmten Teil der Seite überspringen, besser illustriert wie folgt:

    Möchte gemeinsame Stile
    Möchte KEINE gemeinsamen Stile
    Möchte gemeinsame Stile

Nachdem ich mit dem CSS-Reset herumgespielt hatte, was nicht besonders erfolgreich war (hauptsächlich aufgrund der Regeln für die Vorrangigkeit und der komplexen Stylesheet-Hierarchie), kam das allgegenwärtige jQuery zur Rettung, das den Job sehr schnell und ziemlich unsauber erledigt hat:

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

(Jetzt sag mir, wie böse es ist, JS zu verwenden, um mit CSS umzugehen :-) )

Answer 4

Wenn jemand hierher kommt, um nach einer Antwort zu suchen, die iframe verwendet, hier ist sie

</code></pre>
<p><a href="https://caniuse.com/iframe-srcdoc" rel="nofollow noreferrer">https://caniuse.com/iframe-srcdoc</a></p></x-turndown>

Answer 5

BESSERE LÖSUNG

"Kopieren/Einfügen" Stylesheet herunterladen, um CSS-Eigenschaften auf Standard (UA-Stil) zurückzusetzen:
https://github.com/monmomo04/resetCss.git

Danke an @Milche Patern!
Ich war wirklich auf der Suche nach dem Zurücksetzen auf Standard/Eigenschaftenwert. Mein erster Versuch war es, den berechneten Wert des Elements "root" (html) aus dem Browser Dev-Tool zu kopieren. Aber da es berechnet wurde, hätte es auf jedem System anders ausgesehen/funktioniert.
Für diejenigen, die einen Browserabsturz erleben, wenn sie versuchen, das Asterisk (*) zu verwenden, um den Stil der Kinderelemente zurückzusetzen, und da ich wusste, dass es für euch nicht funktioniert hat, habe ich das Asterisk (*) durch alle HTML-Tagnamen ersetzt. Der Browser ist nicht abgestürzt; ich verwende Chrome Version 46.0.2490.71 m.
Zuletzt sei erwähnt, dass diese Eigenschaften den Stil auf den Standardstil des höchsten Wurzelelements zurücksetzen, jedoch nicht auf den anfänglichen Wert für jedes HTML-Element. Um dies zu korrigieren, habe ich die "user-agent"-Styles eines auf Webkit basierenden Browsers genommen und unter der Klasse "reset-this" implementiert.

Nützlicher Link:

"Kopieren/Einfügen" Stylesheet herunterladen, um CSS-Eigenschaften auf Standard (UA-Stil) zurückzusetzen:
https://github.com/monmomo04/resetCss.git

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

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

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