火狐不應用樣式爲「第一子：先將字母」

我想一定風格應用到我的頭，這是由文本的第一個字母。我的網頁是在這裏：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。

我也試過：

在這些末尾添加!important。
查看它的開發工具，它並沒有顯示屬性的。

來源

2013-04-06 notypist

如果這一頁是那些樣式？我沒有找到它們...... – 2013-04-06 03:18:29

我看不出Chrome和Firefox在主標題上的渲染效果有什麼區別，只不過它在Chrome上以火狐爲中心左對齊。該問題應該指定在演示頁面上使用哪個CSS代碼以及預期的效果。 – 2013-04-06 05:53:06

@BorisZbarsky - 我還沒有應用這些樣式，因爲按照我的問題，它們沒有在不同的瀏覽器上一致地應用。 @ JukkaK.Korpela - 標題以Firefox爲中心？！它不應該。並指定使用哪些CSS代碼：1.我不確定是否使用了不同的CSS 2.這並不重要，因爲我已經用firebug試過了這個3.我所做的所有其他更改，其中沒有「首字母」，至今一直得到應用。 – notypist 2013-04-06 11:40:51

問題爲.branding h1 a:first-child:first-letter是first-letter只能應用於塊元件，而不是內聯元素等a。看到這個previous question

我也不明白爲什麼其他人都沒有工作...

但是爲什麼你需要使用，甚至first-child？

你可以得到相同的效果，解決了這個問題：

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

它實際上更簡單。

Demo

來源

2013-04-06 00:37:59 bookcasey

謝謝，但這沒有奏效。似乎任何帶有'first-letter'或'first-child：first-letter'的東西都不起作用，但是隻有'first-child **'的所有東西都是**。 – notypist 2013-04-06 00:54:02

@ Darwin229：你在什麼版本的FF？我在Win7機器上運行19.0.2，書架上的Demo正在改變。 [我自己的演示，我設置測試]（http://jsfiddle.net/zb9va/）也適用於我，它有組合選擇器'h1：first-child：first-letter'。 – ScottS 2013-04-07 17:11:15

@ Darwin229：自從[自1.0版以來一直由FF支持]（https://developer.mozilla.org/en-US/docs/CSS/::first-letter），它似乎並不重要。 – ScottS 2013-04-07 17:14:57

火狐不應用樣式爲「第一子：先將字母」

回答

相關問題