Как стиль для первого ребенка?

Например, у меня есть HTML:

<div class='page'>
    <span>2</span>
    <span>2</span>
    <a>1</a>
    <a>6</a>
</div>

Как я могу создать стиль для первого дочернего элемента

Я использовал вот так: .page a:first-child {color:red}

но он не запускается.

Ответ 1

Используйте first-of-type вместо first-child

.page a:first-of-type{
    color:red;
}

Псевдокласс класса first-of-type представляет первый родной тип своего типа в списке дочерних элементов его родительского элемента.

Взято из Документация MDN. Вы можете найти более подробную информацию и примеры здесь.

Объяснение: : первый ребенок не работает как ожидалось

Ответ 2

Как сказал Пранав c, вы можете использовать .page a:first-of-type { ... } или .page a:nth-of-type(1) { ... }, но ни один из них не будет работать в IE8

Итак, если мы можем предположить, что <span> всегда будет там, то

.page span+a { ... }

будет гарантировать, что будет только первый а после пролета, и это так же хорошо, как вы можете получить кросс-браузер прямо сейчас.

Пример: FIDDLE