Tragen Sie eine CSS auf alle Elemente eines bestimmten div

Question

Ich habe diesen Code:

<div class="main"> 
 
\t <div class="div1"> 
 
\t \t <div> 
 
\t \t \t <p> 
 
\t \t \t \t <a href="#"></a> 
 
\t \t \t </p> 
 
\t \t \t <span></span> 
 
\t \t </div> 
 
\t \t <p>Loremp Loremp</p> 
 
\t \t <p>Loremp Loremp</p> 
 
\t \t <a href="#">Loremp Loremp</a> 
 
\t \t <span>Hello World</span> 
 

 
\t </div> 
 

 
\t <div class="div2"> 
 
\t \t <p>Loremp Loremp</p> 
 
\t \t <p>Loremp Loremp</p> 
 
\t \t <a href="#">Loremp Loremp</a> 
 
\t \t <span>Hello World</span> 
 
\t </div> 
 
</div>

Gibt es eine Möglichkeit für mich, ohne alle Elemente div1 Ziel, dass auf angewendet wird div2?

Was ich tun möchte, ist, um den CSS-Code sehr einfach zu machen, ohne jedes Element von div1 eins nach dem anderen zu zielen.

/*I want to make something like that but without affecting the div2*/ 
 

 
*{ 
 
color: blue; 
 
}

Answer 1

Einfach

.div1 * { 
color: blue; 
} 

Oder noch besser, nur

.div1 { 
color: blue; 
} 

In meinem ersten Code-Block, alle Teilelemente von Elementen mit Klasse div1 haben color: blue angewendet.

Im zweiten Block des Codes werden nur die Elemente mit Klasse div1color: blue angewendet haben, aber alle Subelemente erbt es auch (sofern sie es überschreiben). Daher sollte der Effekt gleich sein.

Answer 2

Sie können einen CSS-Selektor mit dem Namen der Klasse verwenden, die Sie für das div-Attribut in Ihrem HTML angegeben haben.

.div1 { 
    color: blue; 
} 

Tipp: vermeiden Universal-Selektoren in CSS (wie .div1 * { mit Selbst als es negligent performance overload hat, kann es have impacts you are not accounting for neben der sein least efficient selector verfügbar

Answer 3

Sie können mit diesem Selektor alle Kinder entsprechen.. :

.div * { 

} 

oder wenn Sie wollen ein bestimmtes Element Typ entsprechen:

.div * p { 

} 

See: https://www.w3.org/TR/CSS21/selector.html#descendant-selectors

Answer 4

Property color wurde standardmäßig geerbt. Das bedeutet, dass Sie diese Eigenschaft nur für das übergeordnete Element festlegen müssen. Dann werden alle untergeordneten Elemente automatisch übernommen.

.div1{ 
color: blue; 
} 

Answer 5

erste, NO: Mit .div1 * werden Sie schließlich in den Arsch beißen.

Am besten wäre es, den Stil auf .div1 {...} anzuwenden und auf die Vererbung zu vertrauen.

Wenn Sie Text in div1 haben, den Sie nicht stylen möchten, können Sie den Stil auf die (direkten) Child-Knoten von div1 anwenden: .div1 > * {...}. Und von diesem Punkt an, auf die Erbschaft.

Irgendetwas Spezifischeres wie das oben vorgeschlagene Beispiel wird unerwartete Nebenwirkungen haben und Sie auf einen Weg bringen, wo Sie die Spezifität Ihrer Selektoren mehr und mehr erhöhen müssen.
Führen zu Dinge wie .div1 p ul li .foo div span.bar {...} und überschreiben es mit .div1 p ul li .foo div span.bar * {...} und so weiter. (dramatisiert)

Wenn Ihr Problem die Links in Ihrem Markup sind, betrachten Sie einen generischen "Reset"/Modifikation der Link-Tags, damit sie besser in den umgebenden Text passen: etw. mögen.

a, 
a:active { 
    color: inherit; 
} 

und vielleicht möchten Sie auch diese zu einem bestimmten Kontext zu beschränken, wie .main

Edit:

OK, P.Lionel, das ist eine andere Sache; Ich stimme zu.
Mit .someSliderPluginClassName * { box-sizing: border-box } ist eine geeignete Möglichkeit, dies schnell und einfach zu implementieren, und es hat ein überschaubares Risiko.

Sie verwenden .container (wie in Ihrem Kommentar) als Art von Kontext für die Elemente dieses Slider-Plugins und geben alle Kontrolle über dieses Plugin. (Fast) nichts, was Sie in diesem Kontext behandeln müssen.

Auf der anderen Seite können Sie die Migration Ihrer Stile auf box-sizing: border-box betrachten. Imo. es ist das bessere und konsistentere Boxmodell und mehr und mehr Plugins (und CSS-Frameworks) verlassen sich darauf.

Ich weiß, es ist jetzt eine Art von Anstrengung, aber es könnte sich in der Zukunft auszahlen. Nur meine 5 Cent.