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

Sie haben mobile-first Websites erwähnt... Für ein responsives Design ist es sicherlich möglich, kleine Bildschirmstile mit großen Bildschirmstilen zu überschreiben. Aber möglicherweise ist das nicht notwendig.

Versuchen Sie dies:

.thisClass {
    /* Regeln für alle Fenstergrößen. */
}

@media all and (max-width: 480px) {
    .thisClass {
        /* Regeln nur für kleine Browserfenster. */
    }
}

@media all and (min-width: 481px) and (max-width: 960px) {
    .thisClass {
        /* Regeln nur für mittlere Browserfenster. */
    }
}

@media all and (min-width: 961px) {
    .thisClass {
        /* Regeln nur für große Browserfenster. */
    }
}

Diese Media-Abfragen überschneiden sich nicht, so dass ihre Regeln sich nicht gegenseitig überschreiben. Dies erleichtert die separate Pflege jeder Menge von Stilen.

Answer 2

Für diejenigen unter euch, die versuchen herauszufinden, wie man tatsächlich nur das Styling vom Element entfernt, ohne das CSS aus den Dateien zu entfernen, funktioniert diese Lösung mit jQuery:

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

Answer 3

Wenn Sie Ihr CSS innerhalb von Klassen festlegen, können Sie sie leicht mit der jQuery removeClass() Methode entfernen. Der folgende Code entfernt die .element Klasse:

    Quelle   
    Ziel
      
        $(".element").removeClass();

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

Answer 4

Ich habe Material-Tailwind für mein Projekt verwendet und hatte Schwierigkeiten, das Standard-CSS eines Elements zu entfernen. Daher habe ich einfach style={{all: "revert"}} als Attribut in meinem JSX hinzugefügt und es hat für mich funktioniert.

Answer 5

Wie auch andere Antworten bereits erwähnt haben, scheint die CSS-Eigenschaft all mit dem Wert unset alle CSS-Eigenschaften zu überschreiben, ohne zu wissen, welche Eigenschaften im Spiel sind. Dies hat jedoch bei mir nicht funktioniert, als ich benutzerdefiniertes CSS auf einer Wordpress-Website hinzugefügt habe, da die all Eigenschaft vom Wordpress-Benutzerdefinierten CSS-Editor nicht erkannt wurde und keine Änderungen in Microsoft Edge widerspiegelte. Stattdessen hat bei mir eine brachiale Überschreibung funktioniert, das heißt, jede verwendete Eigenschaft im Webseiten-Element zu identifizieren und manuell zurückzusetzen. Der Weg, um die verwendeten CSS-Eigenschaften eines Elements zu identifizieren, besteht darin, das Element mit Ihrem Webbrowser zu inspizieren und den Tab 'Styles' durchzugehen.