html – CSS :: before is invalidifying :: first-letter

Html代码：

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/

最佳答案

从the spec开始：

After the rule p::before {content: "Note: "},the selector
p::first-letter matches the "N" of "Note".

另请注意,display属性在first-letter和：first-line伪元素上无效.再次,从规范：

A future version of this specification may allow this pseudo-element
to apply to more display types.

这是预期的行为.

解决方法：

HTML：

和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/

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。