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

发布时间：2020-12-14 22:54:47 所属栏目：资源来源：网络整理

导读：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-

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/

                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!