Czy istnieje selektor CSS dla pierwszego bezpośredniego dziecka?

Question

Mam następujące html

<div class="section"> 
    <div>header</div> 
    <div> 
      contents 
      <div>sub contents 1</div>    
      <div>sub contents 2</div> 
    </div> 
</div> 

i następujący styl:

DIV.section DIV:first-child 
{ 
    ... 
} 

z jakiegoś powodu, że nie rozumieją styl jest uzyskiwanie stosowane do "zawartości sub 1"<div> jak również "nagłówek"<div>.

Pomyślałem, że selektor stylu ma zastosowanie tylko do pierwszego bezpośredniego dziecka div z klasą o nazwie "sekcja". Jak mogę zmienić selektor, aby uzyskać to, czego chcę?

Answer 1

To, co napisałeś dosłownie, oznacza "Znajdź dowolne divy, które znajdują się w dziale div i są pierwszym dzieckiem ich rodzica". Sub zawiera jeden tag pasujący do tego opisu.

Nie jest dla mnie jasne, czy chcesz, aby oba dzieci z głównego div, czy nie. Jeśli tak, użyj tego:

div.section > div 

Jeśli chcesz tylko nagłówek, użyj tego:

div.section > div:first-child 

Używanie > zmienia opis na: „znaleźliśmy żadnych div, które są bezpośrednimi potomkami div sekcji "czego chcesz.

Należy pamiętać, że wszystkie główne przeglądarki obsługują tę metodę, z wyjątkiem IE6. Jeśli obsługa IE6 ma krytyczne znaczenie, będziesz musiał dodać klasy do elementów div dziecka i zamiast tego użyć ich. W przeciwnym razie nie warto się tym przejmować.

Answer 2

div.section > div 

Answer 3

CSS nazywa się kaskadowymi arkuszami stylów, ponieważ reguły są dziedziczone. Stosując następujący selektor, będzie wybrać tylko bezpośrednie dziecko rodzica, ale jego przepisy będą dziedziczone przez że div „s dzieci divs:

div.section > div { color: red } 

teraz, że zarówno divi jej dzieci będzie red. Trzeba odwołać się cokolwiek ustawić na rodzica, jeśli nie chcesz, żeby odziedziczyć:

div.section > div { color: red } 
div.section > div div { color: black } 

Teraz tylko pojedynczy div że jest bezpośrednim dzieckiem div.section będzie czerwony, ale jego dzieci będą nadal divs bądź czarny.

Answer 4

Użyj div.section > div.

Jeszcze lepiej, użyj znacznika <h1> w tytule i div.section h1 w Twojej CSS, tak aby wspierać starszych przeglądarek (które nie wiedzą o >) i zachować semantyczne znaczniki.

Answer 5

Wyszukiwanie tego pytania w Google. Spowoduje to zwrócenie pierwszego elementu potomnego elementu o klasie container, niezależnie od typu dziecka.

.container > *:first-child 
{ 
}