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

Gibt es eine Möglichkeit, dass du nach der !important-Regel suchst? Es hebt nicht alle Deklarationen auf, bietet aber eine Möglichkeit, sie zu überschreiben.

Wenn eine !important-Regel in einer Style-Deklaration verwendet wird, wird diese Deklaration jede andere Deklaration im CSS überschreiben, egal wo sie in der Deklarationsliste steht. Allerdings hat !important nichts mit Spezifität zu tun.

https://developer.mozilla.org/de/docs/CSS/Specificity#The_!important_exception