Czy istnieje selektor CSS tylko dla pierwszego bezpośredniego dziecka?

Mam następujący 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, dla którego nie rozumiem, styl jest stosowany do „zawartości podrzędnej 1”, <div> a także do „nagłówka” <div> .

Pomyślałem, że selektor stylu będzie miał zastosowanie tylko do pierwszego bezpośredniego potomka div z klasą o nazwie „section”. Jak mogę zmienić wybierak, aby uzyskać to, czego chcę?

To, co opublikowałeś, dosłownie oznacza „Znajdź divy, które są wewnątrz div div sekcji i są pierwszymi potomkami ich rodziców”. Sub zawiera jeden tag, który pasuje do tego opisu.

Nie jest dla mnie jasne, czy chcesz oboje dzieci z głównej dywizji, 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

Za pomocą >zmian zmienia się opis: „Znajdź dowolne divy, które są bezpośrednimi potomkami div div sekcji”, co jest tym, 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 kluczowe znaczenie dla misji, będziesz musiał dodać klasy do potomnych div i użyć ich zamiast tego. W przeciwnym razie nie warto się tym przejmować.

Znalazłem to pytanie podczas wyszukiwania w Google. Zwróci to pierwsze dziecko elementu z klasą container, niezależnie od tego, jaki typ jest to dziecko.

.container > *:first-child
{
}

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

div.section > div { color: red }

Teraz zarówno to, jak div i jego dzieci będą red. Musisz anulować wszystko, co ustawisz na rodzicu, jeśli nie chcesz, aby dziedziczyło:

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

Teraz tylko ten singiel, divktóry jest bezpośrednim dzieckiem, div.sectionbędzie czerwony, ale jego dzieci divsbędą nadal czarne.

div.section > div

Zastosowanie div.section > div.

Co więcej, użyj <h1>znacznika dla nagłówka i div.section h1w swoim CSS, aby obsługiwać starsze przeglądarki (które nie wiedzą o tym >) i utrzymywać znaczniki semantyczne.

Selektor CSS dla bezpośredniego pierwszego dziecka w twoim przypadku to:

.section > :first-child

Bezpośrednim selektorem jest>, a pierwszym selektorem potomnym jest: first-child

Nie ma potrzeby używania gwiazdki przed: jak sugerują inni. Możesz przyspieszyć wyszukiwanie DOM, modyfikując to rozwiązanie, przygotowując tag:

div.section > :first-child