Mam element z class='myTestClass'
. Jak zastosować styl CSS do wszystkich elementów podrzędnych tych elementów? Chcę tylko zastosować styl do elementów dziecięcych. Nie jego wnuki.
mógłbym użyć
.myTestClass > div {
margin: 0 20px;
}
które działają dla wszystkich div
dzieci, ale chciałbym rozwiązania, które działa dla wszystkich dzieci. Myślałem, że przydałoby się *
, ale
.myTestClass > * {
margin: 0 20px;
}
nie działa.
Edytować
.myTestClass > *
Selektor nie zastosować regułę w Firefoksie 26, i nie ma innego zasada marginesu zgodnie z Firebug. I to działa, czy mogę wymienić *
z div
.
css
css-selectors
MTilsted
źródło
źródło
Odpowiedzi:
Jak skomentował David Thomas , potomkowie tych elementów potomnych (prawdopodobnie) odziedziczą większość stylów przypisanych do tych elementów potomnych.
Musisz zawinąć
.myTestClass
element wewnątrz elementu i zastosować style do elementów podrzędnych, dodając.wrapper *
selektor potomków . Następnie dodaj.myTestClass > *
selektor potomny, aby zastosować styl do elementów potomnych, a nie do jego wnuków. Na przykład w ten sposób: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>
źródło
Zamiast
*
selektora możesz użyć:not(selector)
z>
selektorem i ustawić coś, co na pewno nie będzie dzieckiem.Edycja: Myślałem, że będzie szybciej, ale okazuje się, że się myliłem. Lekceważenie.
Przykład:
.container > :not(marquee){ color:red; } <div class="container"> <p></p> <span></span> <div>
źródło