Firefox没有将样式应用于“第一个孩子：第一个字母”

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 的所有内容都是。

我也尝试过：

1. 在这些结尾添加!important。
2. 在开发人员工具中查看它，但根本没有显示该属性。

Answer 1

.branding h1 a:first-child:first-letter的问题是first-letter只能应用于块元素，而不能应用于a等内联元素。见previous question

我也不明白为什么其他人不工作......

但为什么你甚至需要使用first-child？

您可以获得相同的效果并用此解决问题：

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

实际上更简单。

Demo