wake-up-neo.com

Wie wende ich einen Stil auf alle Kinder eines Elements an?

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

Ich könnte benutzen

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

die für alle div Kinder funktionieren, aber ich hätte gerne eine Lösung, die für alle Kinder funktioniert. Ich dachte, ich könnte * verwenden, 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 die Marge gemäß Firebug. Und es funktioniert, wenn ich * durch div ersetze. 

csscss-selectors
53
MTilsted

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

Sie müssen Ihren .myTestClass in ein Element einschließen und die Formatvorlagen auf Nachkommen anwenden, indem Sie .wrapper *untergeordneter Selektor hinzufügen. Fügen Sie dann .myTestClass > *untergeordneter Selektor 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>

89
Anonymous

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

Beispiel:

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


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