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這樣a內聯元素。 看到上一個問題

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

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

您可以獲得相同的效果並解決此問題：

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

它實際上更簡單。

演示