Ich habe einen Editor erstellt, den Benutzer verwenden können, er hat eine Palette von Stilen zur Auswahl, für dieses Beispiel nennen wir diese .p1 und '.p2'. Das Problem, das ich habe, ist, dass sie sich gegenseitig überschreiben, je nachdem, in welcher Reihenfolge sie im Stylesheet erscheinen.
Ich kann keinen Weg finden, der das lösen wird, weil ich nicht weiß, wie diese Panels verschachtelt sein können.
Dieses Beispiel ist wesentlich vereinfacht, und ich kann nicht genau steuern, wo Dinge wie das a-Tag sein werden, sie könnten in Tabellen, Listen, Absätzen oder anderen Tags in jeder Tiefe verschachtelt sein. Dies gilt auch für Überschriften und alle anderen untergeordneten Elemente, für die ein angepasster Stil erforderlich ist (z. B. H1, ul ...), damit er in dem Kontext, in dem er angezeigt wird, gut aussieht.
Ich habe herumgespielt mit: nicht Selektor, und auch mit allen: Standard, auf Kinder, aber hatten kein Glück.
Ihr Beispiel ist ein wenig verwirrend, weil es zwei Klassen auf dasselbe Element angewendet hat.
Wenn ich Sie richtig verstehe, möchten Sie, dass das Element a durch den nächsten Vorgänger im DOM formatiert wird.
Wenn dies der Fall ist, wäre die Lösung, ein Regelwerk zu setzen, bei dem die Vorfahren mit einer der beiden Klassen immer übereinstimmen und die Regel mit der höchsten Spezifität gewinnt .... p>
Tut mir leid, aber ich kann keinen besseren Weg finden, es zu erklären ...
Es sieht so aus, als ob Sie nach dem direkten untergeordneten Selektor > suchen. Weitere Informationen zum direkten untergeordneten Selektor im MDN .
Live-Demo: