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 的东西都不起作用> 只有是。

我也试过:

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

Answer 1

.branding h1 a:first-child:first-letter 的问题是 first-letter 只能应用于 block 元素，而不是内联元素，如 一个。看这个previous question

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

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

你可以得到相同的效果并解决这个问题:

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

其实更简单。

Demo