Verschiedene CSS-Blätter mit denselben Regelnamen für verschiedene HTML-Dokumentelemente verwenden

Question

Ich brauche eine Möglichkeit, mehrere Stylesheets mit denselben Regelnamen zu laden und sie dann auf verschiedene Elemente auf einer Seite anzuwenden. Ist das möglich?

Hier ist ein Beispiel für etwas, das ich gerne tun würde. Nehmen Sie die beiden Stylesheets unter:

style1.css:

.size{ 
    color: #FF6600; 
    font-size: 18px; 
} 

style2.css:

.size{ 
    color: #FF0000; 
    font-size: 14px; 
} 

Ich mag wäre in der Lage sein, sie beide auf eine Seite zu importieren (vielleicht mit eine ID irgendeiner Art), und setze den Text innerhalb eines bestimmten div, um die Regeln von style1.css zu verwenden, und ein anderes div sollte die Regeln von style2.css verwenden.

Ich muss die Dinge auf diese Weise tun, weil es Benutzern meiner Anwendung erlaubt, benutzerdefinierte Stylesheets für verschiedene Widgets auf einer Seite hochzuladen. Dieses Schema sollte funktionieren, sofern die Blätter das gleiche Benennungsschema verwenden.

Answer 1

Die Antwort ist nein, Sie können es nicht so machen. Die zuletzt geladene Regel hat Vorrang.

Sie sollten die verschiedenen Widgets mit verschiedenen Klassen oder IDs, unterscheiden und dann werden Sie nicht die gleichen Regeln.

#widgetB .size{ 
     color: #FF0000; 
     font-size: 14px; 
} 

#widgetA .size{ 
     color: purple; 
     font-size: 10px; 
} 

Answer 2

Wenn Sie dies tun, wird die im Stylesheet deklarierte Regel, die zuletzt geladen wurde, auf alle Elemente angewendet, die mit den Regeln übereinstimmen.

Answer 3

Vielleicht könnten Sie so etwas wie jQuery verwenden, um den Standard-Seite CSS und ersetzen Sie es mit dem Benutzer Sheet zu entfernen, im Grunde das Stylesheet auf der Client-Seite austauschen.

Answer 4

Vielleicht können Sie jedes Widget in einen Iframe setzen. In diesem Iframe würden Sie das benutzerdefinierte Stylesheet für dieses Widget aufrufen. Auf diese Weise gewinnen Sie mehr Modularität und können direkt das tun, was Sie wollen, ohne sich Gedanken über Cheats machen zu müssen, um das Problem zu umgehen.

Answer 5

Um Ihre Frage direkt zu beantworten, "Nein". Der CSS-Code selbst müsste einen Kontext haben.

"Es wird Benutzern meiner Anwendung ermöglichen, benutzerdefinierte Stylesheets für verschiedene Widgets auf einer Seite hochzuladen" - so wie ich das lese, schlage ich vor, jedes Widget in eine eindeutige ID oder ähnliches zu verpacken. Dann

konnten Benutzer Sheets laden mit einem wenig Kontext, aber immer noch die gleichen grundlegenden Namen, wie:

#widget-one .size { ... } 

#widget-two .size { ... } 

Aber irgendeine Art von Kontext/Präfix erforderlich ist.