Firefox не применяет стили к «first-child: first-letter»

Question

Я пытаюсь применить определенный стиль к первой букве в моем заголовке, который состоит из текста. Моя страница домашняя страница здесь: http://smarterinfive.com

Это хорошо работает в Chrome, но совсем не в FF. Вот свойство я уже пытался применять свои стили, не напрасно (в FF):

header[role="banner"] .branding:first-letter { 
background: #000; 
} 

.branding:first-child:first-letter { 
background: #000; 
} 

.branding h1 a:first-child:first-letter { 
background: #000; 
} 

Кажется, что ничего с first-letter или first-child:first-letter не работает, но все с first-childтолько IS.

Я также попытался:

1. Добавление !important в конце этого.
2. Просмотр в инструментах разработчика, которые вообще не отображали свойство.

Answer 1

Проблема в том, что .branding h1 a:first-child:first-letterfirst-letter может быть применен только к блочным элементам, а не встроенные элементы, такие как a. Смотрите это previous question

Я также не понимаю, почему другие не работают ...

Но почему вам нужно использовать даже first-child?

Вы можете получить тот же эффект и решить проблему с этим:

.branding h1:first-letter { 
    background: black; 
} 

Это на самом деле проще.

Demo