Псевдокласс класса nth-child ссылается на «N-й согласованный дочерний элемент», то есть если у вас есть структура следующим образом:

    
Hello

    
Paragraph

    
Target

Затем p:nth-child(2) выберет второй ребенок, который также ap (а именно p с «абзацем»). p:nth-of-type выберет второй согласованный элемент p, а именно нашу цель p).

Вот отличная статья по этой теме Криса Койера @ CSS-Tricks.com

Причина ваших разрывов заключается в том, что тип относится к типу элемента (а именно div), но первый div не соответствует указанным вами правилам (.row .label ), поэтому правило не применяется.

Причина в том, что CSS анализируется справа налево , что означает, что браузер сначала смотрит на :nth-of-type(1), определяет его ищет элемент типа div, который также является первым его типом, который соответствует элементу .row и первому элементу .icon. Затем он читает, что элемент должен иметь класс .label, который ничего не соответствует приведенному выше.

Если вы хотите выбрать первый элемент метки, вам нужно будет либо обернуть все ярлыки в их собственный контейнер или просто использовать nth-of-type(3) (при условии, что всегда будет два значка).

Другой вариант, будет (к сожалению) использовать ... ждать его ... jQuery:

$(function () {
    $('.row .label:first')
        .css({
            backgroundColor:"blue"
        });
});