解决方法：

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

CSS :: before无效:: first-letter

2 个答案:

解决方法：