css - 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-letter在于它first-letter只能应用于块元素，而不是像a. 请参阅上一个问题

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

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

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

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

它实际上更简单。

演示