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 [email protected]

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.

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

Answer 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

Answer 3

Ich werde immer wieder genervt und sage, du solltest vermeiden, !importantwo immer du kannst

Jacob Schneider

Answer 4

55

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

Höhe: auto! wichtig;

Fabian Brenes
quelle

4

Ich würde davon abraten, !importantin Ihrem Produktions-Markup zu verwenden - es sollte eigentlich nur beim Debuggen verwendet werden.

Freundlich

@Amicable kannst du erklären warum das nicht ratsam ist?

felipe_gdr

1

@pipo_dev Es sind viele Artikel online, die es besser erklären könnten als ich es in einem Kommentar und mit Beispielen könnte. Es ist eine Nussschale, es ist ein Hack. 99% der Zeit wird es in Lei eines richtigen Fixes verwendet, was zu einem besseren und wartbareren CSS führen würde. Einige akzeptable Verwendungen von !importantumfassen Dienstprogrammklassen und Abwärtskompatibilitäts-Hacks für alte Browser wie IE7

Amicable

deosnt Arbeit. Pagnation ist der letzte td in der Tabelle. .detailTable td {width: 50%; } .pagnation {width: 100%! wichtig; }

Philip Rego

2

Ich stimme @Amicable nicht zu. Es gibt wirklich keine Alternative zur Verwendung, !importantwenn Sie mit einem übergeordneten Thema feststecken, über das Sie keine Kontrolle haben, das Sie aber dennoch überschreiben möchten.

Justin Skiles

Answer 5

4

Ich würde davon abraten, !importantin Ihrem Produktions-Markup zu verwenden - es sollte eigentlich nur beim Debuggen verwendet werden.

Freundlich

Answer 6

@Amicable kannst du erklären warum das nicht ratsam ist?

felipe_gdr

Answer 7

1

@pipo_dev Es sind viele Artikel online, die es besser erklären könnten als ich es in einem Kommentar und mit Beispielen könnte. Es ist eine Nussschale, es ist ein Hack. 99% der Zeit wird es in Lei eines richtigen Fixes verwendet, was zu einem besseren und wartbareren CSS führen würde. Einige akzeptable Verwendungen von !importantumfassen Dienstprogrammklassen und Abwärtskompatibilitäts-Hacks für alte Browser wie IE7

Amicable

Answer 8

deosnt Arbeit. Pagnation ist der letzte td in der Tabelle. .detailTable td {width: 50%; } .pagnation {width: 100%! wichtig; }

Philip Rego

Answer 9

2

Ich stimme @Amicable nicht zu. Es gibt wirklich keine Alternative zur Verwendung, !importantwenn Sie mit einem übergeordneten Thema feststecken, über das Sie keine Kontrolle haben, das Sie aber dennoch überschreiben möchten.

Justin Skiles

Answer 10

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

Answer 11

Ich baue eine modale Do-Block-Website. Dies war eine Lösung dafür, dass meine HTML-Tags nicht durch die Website-Stile überschrieben werden.

Lucas Andrade

Answer 12

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.

Answer 13

3

Sie sollten dies verwenden

Höhe: auto! wichtig;

Ahmar Mahmood
quelle

Answer 14

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!

Answer 15

1

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

Elad Silber
quelle

Answer 16

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>

Answer 17

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 [email protected]

Answer 18

Können Sie erklären, warum man für eine so einfache Anforderung Typoskript verwenden sollte?

Nico Haase

Answer 19

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.

So ignorieren Sie den übergeordneten CSS-Stil

Antworten: