Вот пример:
<div>
<div >0</div>
<div >1</div>
<div >2</div>
<div >3</div>
<div >4</div>
<div >5</div>
</div>
этот селектор: div div:nth-child(1)
выберет первый дочерний элемент div, но с другим условием, что дочерний элемент должен быть div. здесь первый ребенок является <div>0</div>
, но если первый ребенок был абзацем p
: <p>0</p>
, этот селектор не будет влиять на страницу, потому что нет первого ребенка div
, первым ребенком является p
.
, но этот селектор: div div:nth-of-type(1)
, если первый ребенок был <div>0</div>
, будет влиять на него, но если первый ребенок <p>0</p>
, теперь он будет воздействовать на второго ребенка <div>1</div>
, потому что это первый ребенок его тип div
.