CSS reset alle Stile in einem div aber erlauben niedrigere Stile, um es zu überschreiben

Question

So haben meine wichtigsten Stylesheet, dass alle Stile für meine Website setzt. Aber ich habe ein Div, das als Menü öffnet. Ich brauche es, um seinen eigenen Stil zu haben, und ich kann es nicht haben, oder es ist decedents inhärente irgendwelche Stile vom Hauptstylesheet. Aber nachdem ich den Style zurückgesetzt habe, style ich das Div wie ein ganz neues Element. Ich habe alles gefunden: initial; Ruhe die Elemente aus. und #we_gallery_edit_window> * Art von Arbeiten. Aber wenn ich versuche, die neuen Stile zu deklarieren, werden einige der neuen Stile wegen der Vorrangstellung nicht angenommen. Hier ist mein Code so weit:

h1 
{ 
    color: #000000; 
    background-color: #FFFFFF; 
} 
#my_div > * /*Clear all previous CSS for #mydiv only */ 
{ 
    all: initial; 
} 
.my_div_child h1 
{ 
    color: #F0F0F0; 
} 

<h1>Hello</h1> //Should be black with background 
<div id='my_div'> 
    <h1 class='my_div_child'>Good bye</h1> //Should be grey without background 
</div> 
<h1>Hello</h1> //Should be black with background 

Ich brauche einen Selektor, der alles darüber überschreiben wird, hat aber keinen Vorrang vor irgendetwas darunter. Entfernen Sie also den Stil, der durch h1 im Hauptdiv gesetzt wurde, und setzen Sie h1 von .my_div_child zurück. Es ist nicht nur das h1-Element, mit dem ich Probleme habe, aber das ist das einfachste Beispiel, das mir einfällt.

Answer 1

Okay, nachdem ich den aktualisierten Beitrag gesehen habe, denke ich, dass ich die Idee habe.

Ich denke, Sie können einfach die falschen Selektoren verwenden. Sie können , wenn Sie sich nicht sicher sind.

Für eine Sache, wenn Sie ein h1 mit der Klasse von my_div_child stylen mögen, würde die Regel h1.my_div_child sein oder einfach .my_div_child, wenn Sie nicht andere, nicht-h1-Elemente mit dem Klassennamen verfügen. Mit .my_div_child h1 werden h1 Tags innerhalb eines übergeordneten Containers mit der Klasse my_div_child ausgewählt. Dies ist nicht das, was Ihr HTML anzeigt.

Wenn Sie die Stile der Kinder von #my_div zurücksetzen mögen, können Sie den all: initial Selektor mit dem Platzhalter wie Sie haben, aber anstatt das direkte Kind Selektor (>), um nur Nest das Wildcard regelmäßig:

#my_div * { 
    all: initial; 
} 

Wenn Sie den direkten Kinderselektor verwenden, wird nur die erste Stufe der Kinder in #my_div zurückgesetzt, aber Enkel von #my_div werden nicht sein, was wahrscheinlich nicht das ist, was Sie wollen.

Diese Dinge geklärt, verwenden Sie einfach die obige Aussage Ihre Stile zurücksetzen und dann Styling den Inhalt #my_div nach Bedarf starten, und es sollte funktionieren, weil verschiedene Tags (zum Beispiel h1) spezifischere sein wird als die Wildcard. Siehe Codefragment unten.

Das heißt, es einfacher einfach finden können bestimmte Stile überschreiben, die nicht sind, was Sie wollen von Spezifität unter Verwendung als alles zurücksetzen in #my_div und von vorn beginnen. Wahrscheinlich gibt es einige Stile, die das Menü insgesamt mit der Site teilen wird. Zum Beispiel:

h1 { 
    font-style: italic; 
} 
#my_div h1 { 
    font-style: normal; 
} 

Wenn diese Ansätze nicht funktionieren, und Sie sind immer noch Probleme mit den Stilen nicht funktionieren, dann würden Sie uns können etwas speziellere Code so herausfinden, was das Problem ist, haben posten .

Beispiel zurück:

html { 
 
    background-color: coral; 
 
    font-style: italic; 
 
    font-family: sans-serif; 
 
} 
 
h1 { 
 
    background-color: white; 
 
} 
 
#my_div * { 
 
    all: initial; 
 
} 
 
#my_div .my_div_child { 
 
    color: darkgray; 
 
    font-size: 4em; 
 
    /* note that font-style and font-family don't need rules b/c they have been reset by all: initial above */ 
 
}

<h1>Hello</h1> <!-- Should be black with background --> 
 
<div id="my_div"> 
 
    <h1 class="my_div_child">Good bye</h1> <!-- Should be grey without background --> 
 
</div> 
 
<h1>Hello</h1> <!-- Should be black with background -->