Wie CSS Vererbung zu brechen?

Question

Ich habe ein Web-Widget erstellt. Dass mein Klient ihre Webseiten einbrachte. Grundsätzlich ruft es beim Laden webservice auf und lädt kundenspezifische Daten.

Als Ergebnis sieht es so aus:

<div class="widget"> 
    <div class="container"> 
    </div> 
</div> 

Dynamisch I CSS-Stile auf meine Widget-Klasse gelten. Passend zu unserem Corporate Styling.

Das Problem liegt vor, wenn Client-Anwendungsstile den Stil überschreiben, den ich Laufzeit angewendet habe.

Zum Beispiel, wenn der Client hat, überschreibt es meine Stile:

body { 
    margin: 0 auto; 
    padding: 0; 
    width: 90%; 
    font: 70%/1.4 Verdana, Georgia, Times, "Times New Roman"; 
} 

Gibt es eine Möglichkeit Erbe zu brechen? Nur um zu sagen, was div mit Klassen-Widget-Stilen hat, erben nicht übergeordnete Stile.

Answer 1

Ich glaube nicht, dass Sie CSS-Vererbung pro sagen können, aber Sie können versuchen, es zu umgehen, indem Sie die Regeln der CSS-Spezifität folgen.

Ein guter Spezifität Artikel

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Try !important um Stile im Widget Hinzufügen Stile gibt ihm eine höhere Spezifität als die Standard.

#myWidget{ 
    font: 100%/1 "Times New Roman", Serif !important; 
} 

EDIT

Wenn der Client auch mit !important es könnte zu Problemen führen. Wenn Sie jsFiddle.com mit einem Beispiel einrichten könnten, könnten wir helfen, das Problem zu finden.

Ich hoffe, dass hilft!

EDIT2

Hinweis, sollte die Strecke geht !important die Zugabe ein letztes Mittel sein, wie es die ‚Trumpfkarte‘ von Style-Regeln ist.

Answer 2

Sie können die Stilvererbung nicht als solche unterbrechen, aber Sie können sicherstellen, dass Ihre Stile entweder wichtiger sind oder in der richtigen Reihenfolge geladen werden, damit Ihre Ergebnisse die Oberhand gewinnen.

Werfen Sie einen Blick auf die !important Tag.

Alternativ, wenn Sie Ihre Stylesheets nach dem Ihre laden, wird Präzedenzfall (es sei denn ihre inline ist). Sie können Javascript verwenden, um Ihre Stile nach dem Laden des Körpers zu laden (Aber dann würden Sie einen "Flicker" -Effekt bekommen).

Answer 3

Sie können Elemente nicht erzwingen, um übergeordnete Stile zu erben.

Sie können jedoch alle möglichen Stile überschreiben, die nicht geändert werden sollen. Wenn Ihre CSS-Spezifität höher als die Kundenspezifität ist, werden Ihre Stile auf der Seite dominieren/ausgedrückt.

Siehe:

CSS Specificity via css-tricks.com

Per Ihrem Beispiel wäre präziser der Code unter Verwendung als die body Erklärung und damit außer Kraft setzen:

.widget .container { 
    font-family: Arial; 
} 

Answer 4

Sie auch inline styling versuchen könnten. Inline-Styling hat die höchste Priorität. Dies funktioniert, wenn Client-Overrides ein importiertes Stylesheet verwenden.

Wie andere bereits erwähnt haben, ist eine weitere Option !important.

Sie können auch die relevanten Spezifikationen bei http://www.w3.org/TR/CSS2/cascade.html nachlesen, wo sie genau beschreiben, wie sie kaskadieren. Wenn die oben genannten Tricks nicht funktionieren, geben Ihnen die technischen Daten vielleicht einen Hinweis oder Sie werden mit Sicherheit wissen, dass dies nicht möglich ist.

Answer 5

Die Verwendung des! Wichtigen CSS-Attributs wird als schlechte Methode betrachtet. Weil es das Potenzial für Präzedenz-Konflikte einführt und es extrem schwierig macht, css auf lange Sicht zu beheben.

ein weniger aufdringlicher Ansatz für dieses Problem ist das Widget mit einer ID zu begrenzen, und in Ihrem Stylesheet, einige der wichtigsten Stildeklarationen mit dem „universal“ Selektor zurücksetzen, wie zum Beispiel:

#myWidget *{ 
    margin: 0; 
    padding: 0; 
    background: none; 
    border: none; 
} 

Zum Beispiel. Definieren Sie dann Ihre Überschreibungen speziell.