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 的所有东西只有是。

我也试过了：

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