CSS ::before 抵消了 ::first-letter

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 的规则？这里发生了什么？如果去掉 ::before，则 ::first-letter 可以正常工作。

在不更改 HTML 的情况下，有没有其他方法来针对此示例中的首字母进行定位？

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

- Savrige

---

https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter - disinfor

Answer 1

从规范中可以得知：

在规则p::before {content: "Note: "}之后，选择器p::first-letter匹配"Note"中的"N"。

同时需要注意的是，在:first-letter和:first-line伪元素上无效的display属性。再次引用规范：

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

这就是预期的行为。

解决方法：

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/

- Mooseman

---

那么，为什么图片会显示出来呢？按照这个逻辑，应该不应该将display:none应用于图片上？ - Savrige

图片是一张图片，不是一个字母。 - Mooseman

Answer 2

这并不是一个致命的问题，因为::first-letter没有被声明为display。

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

- Francisco Cabral

---

似乎使用Visibility: hidden;可以工作。http://jsfiddle.net/Lukedturnbull/kvaxmhth/1/ - Luke Turnbull

@LukeTurnbull visibility 在 Firefox v32 中不起作用。哪个浏览器可以使用？ - disinfor

当我使用FF32时，它不起作用。 现在使用GC 37可以工作。使用可见性并不是一个好选择，因为那样会有问题。 - Francisco Cabral