So ignorieren Sie den übergeordneten CSS-Stil

Question 1

Ich frage mich, wie ich einen übergeordneten Stil ignorieren und den Standardstil (keiner) verwenden kann. Ich werde meinen speziellen Fall als Beispiel zeigen, aber ich bin mir ziemlich sicher, dass dies eine allgemeine Frage ist.

<style>
#elementId select {
    height:1em;
}
</style>

<div id="elementId">
    <select name="funTimes" style="" size="5">
        <option value="test1">fish</option>
        <option value="test2">eat</option>
        <option value="test3">cows</option>
    </select>
</div>

Möglichkeiten, wie ich dieses Problem nicht lösen möchte:

Ich kann das Stylesheet, in dem "#elementId select" festgelegt ist, nicht bearbeiten. Mein Modul hat darauf keinen Zugriff.
Überschreiben Sie den Höhenstil vorzugsweise nicht mit dem Stilattribut.

Zum Beispiel kann ich mit Firebug den übergeordneten Stil deaktivieren und alles ist in Ordnung. Dies ist der Effekt, den ich anstrebe.

Kann ein einmal festgelegter Stil deaktiviert werden oder muss er überschrieben werden?

Question 2

Es muss überschrieben werden. Du könntest benutzen:

<!-- Add a class name to override -->
<select name="funTimes" class="funTimes" size="5">

#elementId select.funTimes {
   /* Override styles here */
}

Stellen Sie sicher, dass Sie !importantFlag im CSS- Stil verwenden, z. B. margin-top: 0px !important Was bedeutet! Wichtig in CSS?

Sie könnten einen Attributselektor verwenden, aber da dies von älteren Browsern (IE6 usw.) nicht unterstützt wird, ist es besser, einen Klassennamen hinzuzufügen

Question 3

Sie können es ausschalten, indem Sie es folgendermaßen überschreiben:

Höhe: auto! wichtig;

Question 4

Dies wurde aufgrund einer Bearbeitung nach oben gestoßen ... Die Antworten sind etwas abgestanden und heute nicht mehr so nützlich, wie eine andere Lösung zum Standard hinzugefügt wurde.

Es gibt jetzt eine "All" -Kürzel-Eigenschaft.

#elementId select.funTimes {
   all: initial;
}

Dadurch werden alle CSS-Eigenschaften auf ihren Anfangswert gesetzt. Beachten Sie, dass einige der Anfangswerte vererbt werden. Dies führt zu einer Formatierung des Elements.

Aufgrund dieser Pause, die beim Lesen oder Überprüfen des Codes in der Zukunft erforderlich ist, verwenden Sie ihn nur, wenn Sie am meisten davon betroffen sind, da der Überprüfungsprozess ein Punkt ist, an dem Fehler auftreten können! beim Bearbeiten der Seite. Wenn jedoch eine große Anzahl von Eigenschaften zurückgesetzt werden muss, ist "all" der richtige Weg.

Standard ist hier online: https://drafts.csswg.org/css-cascade/#all-shorthand

Question 5

Sie können eine andere Definition in Ihrem CSS-Stylesheet erstellen, die die ursprüngliche Regel grundsätzlich umkehrt. Sie können der Regel auch "! wichtig" hinzufügen, um sicherzustellen, dass sie haftet.

Question 6

Sie sollten dies verwenden

Höhe: auto! wichtig;

Question 7

Ich hatte eine ähnliche Situation bei der Arbeit an einer Joomla-Website.

Dem betroffenen Modul wurde ein Klassenname hinzugefügt. In deinem Fall:

<select name="funTimes" class="classname">

nahm dann die folgende einzeilige Änderung in der CSS vor. Die Zeile wurde hinzugefügt

#elementId div.classname {style to be applied !important;}

gut gearbeitet!

Question 8

Wenn ich die Frage richtig verstanden: Sie verwenden autoin der CSSwie diese width: auto;und es wird auf die Standardeinstellungen zurück.

Question 9

Für CSS wäre es sinnvoll, einfach einen zusätzlichen Stil hinzuzufügen (z. B. im Kopfbereich Ihrer Seite, der das verknüpfte Stylesheet überschreibt), wie folgt:

<head>
<style>
#elementId select {
    /* turn all styles off (no way to do this) */
}
</style>
</head>

und deaktivieren Sie alle zuvor angewendeten Stile, aber es gibt keine Möglichkeit, dies zu tun . Sie müssen das Höhenattribut überschreiben und im Kopfbereich Ihrer Seiten auf einen neuen Wert setzen.

<head>
<style>
#elementId select {
    height:1.5em;
}
</style>
</head>

Question 10

Im folgenden Typoskript finden Sie Informationen zum erneuten Anwenden der CSS-Klasse auf ein Element, um die CSS-Stile des übergeordneten Containers (normalerweise eine Framework-Komponente) zu überschreiben und Ihre benutzerdefinierten Stile zu erzwingen. Ihr App-Framework (sei es eckig / reagieren, tut dies wahrscheinlich, sodass das übergeordnete Container-CSS erneut angewendet wurde und keiner Ihrer erwarteten Auswirkungen in CSS-Klassenname für Ihr untergeordnetes Element angezeigt wird. Rufen Sie this.overrideParentCssRule (childElement, 'auf css-class-name '); um das zu tun, was das Framework gerade getan hat (rufen Sie dies in document.ready oder am Ende des Ereignishandlers auf):

      overrideParentCssRule(elem: HTMLElement, className: string) {
        let cssRules = this.getCSSStyle(className);
        for (let r: number = 0; r < cssRules.length; r++) {
          let rule: CSSStyleRule = cssRules[r];
          Object.keys(rule.style).forEach(s => {
            if (isNaN(Number(s)) && rule.style[s]) {
              elem.style[s] = rule.style[s];
            }
          });
        }
      }

Mike Zheng tradrejoe@gmail.com

Question 11

Es gibt eine Reihe von Werten, mit denen CSS-Regeln rückgängig gemacht werden können: initial, unset & revert. Weitere Details aus der CSS-Arbeitsgruppe bei W3C:

https://drafts.csswg.org/css-cascade/#defaulting-keywords

Da dies ein Entwurf ist, werden nicht alle vollständig unterstützt, aber nicht gesetzt und initial in den meisten gängigen Browsern, hat Revert weniger Unterstützung.