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 div
Kinder, 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
.
css
css-selectors
MTilsted
quelle
quelle
Antworten:
Wie von David Thomas kommentiert , erben Nachkommen dieser untergeordneten Elemente (wahrscheinlich) die meisten Stile, die diesen untergeordneten Elementen zugewiesen sind.
Sie müssen Ihr
.myTestClass
Element 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
quelle
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:
quelle