Wie wende ich einen Stil auf alle untergeordneten Elemente eines Elements an?


94

Ich habe ein Element mit class='myTestClass'. Wie wende ich einen CSS-Stil auf alle untergeordneten Elemente dieser Elemente an? Ich möchte den Stil nur auf die untergeordneten Elemente anwenden. Nicht seine Enkelkinder.

ich könnte benutzen

.myTestClass > div {
  margin: 0 20px;
}

welche Arbeit für alle divKinder, aber ich möchte eine Lösung, die für alle Kinder funktioniert. Ich dachte ich könnte es gebrauchen *, aber

.myTestClass > * {
  margin: 0 20px;
} 

funktioniert nicht.

Bearbeiten

Der .myTestClass > *Selektor wendet die Regel in Firefox 26 nicht an, und es gibt keine andere Regel für den Spielraum gemäß Firebug. Und es funktioniert , wenn ich ersetzen *mit div.


2
Wie funktioniert es nicht? Denken Sie daran, dass Nachkommen dieser untergeordneten Elemente (wahrscheinlich) die meisten Stile erben, die diesen untergeordneten Elementen zugewiesen sind.
David sagt, Monica

Debuggen Sie dies mit dem Inspektor und sehen Sie, ob es eine Regel gibt, die es übernimmt
Brewal

Antworten:


141

Wie von David Thomas kommentiert , erben Nachkommen dieser untergeordneten Elemente (wahrscheinlich) die meisten Stile, die diesen untergeordneten Elementen zugewiesen sind.

Sie müssen Ihr .myTestClassElement in ein Element einschließen und die Stile auf Nachkommen anwenden, indem Sie einen .wrapper * Nachkommen-Selektor hinzufügen . Fügen Sie dann die .myTestClass > * untergeordnete Auswahl hinzu , um den Stil auf die untergeordneten Elemente und nicht auf die untergeordneten Elemente anzuwenden. Zum Beispiel so:

JSFiddle - DEMO

.wrapper * {
    color: blue;
    margin: 0 100px; /* Only for demo */
}
.myTestClass > * {
    color:red;
    margin: 0 20px;
}
<div class="wrapper">
    <div class="myTestClass">Text 0
        <div>Text 1</div>
        <span>Text 1</span>
        <div>Text 1
            <p>Text 2</p>
            <div>Text 2</div>
        </div>
        <p>Text 1</p>
    </div>
    <div>Text 0</div>
</div>


4
Verwenden Sie niemals einen Universalwähler. Dies hat einen großen Einfluss auf die Leistung beim Rendern.
Ja, ich kann

3
@yesIcan: Ok, das ist gut zu wissen ... haben Sie eine alternative Lösung, die den universellen Selektor nicht verwendet?
Matthew Nichols

8
Die Leistung des Universal-Selektors ist in modernen Browsern nicht so schlecht. Hier ist eine Referenz . Meine eigenen Erfahrungen bei der Arbeit bestätigen die Schlussfolgerung dieses Autors.
Nathan

0

Anstelle des *Selektors können Sie den :not(selector)mit dem >Selektor verwenden und etwas einstellen, das definitiv kein Kind sein wird.

Edit: Ich dachte, es wäre schneller, aber es stellte sich heraus, dass ich falsch lag. Außer Acht lassen.

Beispiel:

.container > :not(marquee){
        color:red;
    }


<div class="container">
    <p></p>
    <span></span>
<div>

4
Was ist der Vorteil davon?
Wilson Biggs

3
@ WilsonBiggs - es scheint ein fehlgeleiteter Versuch zu sein, "keinen universellen Selektor zu verwenden". Aber es ist offensichtlich eine schlechte Idee, da es "nahezu universell" ist und dennoch einen zusätzlichen Test erfordert. Es muss also alle Arbeiten ausführen, die ein universeller Selektor ausführen würde, und dann zusätzliche Arbeiten ausführen.
ToolmakerSteve

: not (Selektor) funktioniert nur auf Safari und es scheint nicht, dass es auf Chrome / Firefox
funktioniert
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.