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ę?
html
css
css-selectors
Jeremy
źródło
źródło
Odpowiedzi:
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:
Jeśli chcesz tylko nagłówek, użyj tego:
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ć.
źródło
div.section > div:first-child > div { /* Cancel Changes*/}
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.źródło
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 dziecidivs
: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:Teraz tylko ten singiel,
div
który jest bezpośrednim dzieckiem,div.section
będzie czerwony, ale jego dziecidivs
będą nadal czarne.źródło
źródło
Zastosowanie
div.section > div
.Co więcej, użyj
<h1>
znacznika dla nagłówka idiv.section h1
w swoim CSS, aby obsługiwać starsze przeglądarki (które nie wiedzą o tym>
) i utrzymywać znaczniki semantyczne.źródło
Selektor CSS dla bezpośredniego pierwszego dziecka w twoim przypadku to:
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:
źródło