CSS ::之前抵消::第一个字母

Question

HTML代码：

<h1>Example title</h1> 

CSS：

h1::first-letter{ 
    display:none; 
} 
h1::before{ 
    content: url(http://icons.iconarchive.com/icons/ariil/alphabet/32/Letter-E-icon.png); 
} 

我的问题是：为什么是::之前杀死::第一个字母规则？这里发生了什么？如果:: before被删除，则:: first-letter可以正常工作。

有没有其他方法可以在不更改html的情况下定位此示例中的第一个字母？

http://jsfiddle.net/Borachio/kvaxmhth/

Answer 1

从the spec：

规则p::before {content: "Note: "}后，选择 p::first-letter matches the "N" of "Note"。

还要注意display属性是基于:first-letter和:first-line伪元素无效。再次，从规格：

该规范的未来版本可能会允许此伪元素 适用于更多的显示类型。

这是预期的行为。

解决方法：

HTML：

<div><h1>Example title</h1></div> 

和CSS：

h1{ 
    display: inline-block; 
} 
h1::first-letter{ 
    font-size: 0px; 
} 
div::before{ 
    content: url(http://icons.iconarchive.com/icons/ariil/alphabet/32/Letter-E-icon.png); 
} 

演示：http://jsfiddle.net/kvaxmhth/3/

Answer 2

这是不杀生，对::第一个字母没有显示声明。

的更多信息：http://www.w3schools.com/cssref/sel_firstletter.asp