今天小编跟大家讲解下有关CSS first-letter伪类元素的特点 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS first-letter伪类元素的特点 的相关资料，希望小伙伴们看了有所帮助。
有一次我试图让<div id="acticle"><p>……</p></div>中的P也能实现首字下沉 可是结果却失败了 得出的结论是：我们并不能隔着一层标签去控制子对象中的第一个字符。
由于这句存在误解的可能性（我就误解了他的意思） 振之在第一时间就删除这句话。他的意思准确地说 是:first-letter这个伪类无法向下“继承”。例如：复制代码代码如下: <div id="demo"> <p>我要实现首字下沉</p> </demo> 如果只定义#demo:first-letter 我们将看不到任何结果 必须使用#demo p:first-letter。和a:link这样的链接伪类不同 :first-letter（当然还有其他的）无法向下“继承”。之所以加上引号 是因为:first-letter的这种无法穿透子对象的特性和通常定义的继承有所区别。这一概念在《CSS权威指南》中是这样定义的：基于继承机制 样式不仅应用到指定元素 还会应用到它的后代元素。假设在上面的html代码中我们给外层定义一个边框：#demo { border： 1px solid #000; } 我们知道这里无法向下继承的是border属性 而:first-letter是一个伪类元素 换个说法 :first-letter中的任何属性均不向下继承。复制代码代码如下:#demo:first-letter { font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; line-height:1.2em; float:left; padding:5px 2px 0 0; color:#c00 } #demo p:first-letter { font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; 5: line-height:1.2em; float:left; padding:5px 2px 0 0; color:#c00 }如果问题仅仅是这个 那么文章也到此结束了。但是在我测试:first-letter这个伪类元素的特质是否存在于各大浏览器的时候 我发现在IE8下 不论我如何设置我的css(如上) 效果都是不可见的。原谅我的孤陋寡闻 我竟然怀疑起IE Tester的性能 我第一想到的是它对IE8的渲染核心设置有误。接着我升级了我的IE7……直到我在崭新的IE8 beta1浏览器中打开测试页的时候 我还是没有怀疑IE8 因为即使是IE5.5也是支持:first-letter伪类的。
叼着烟斗的名侦探说过：“除掉所有不可能的 留下来的 无论多么不合理 但它就是真相......！”是的 真相就是IE8 beta1不支持:first-letter（还有:first-line）。我希望这是beta1版本中的一处来不及修复的bug 因为在微软官方的IE5~IE8 CSS兼容表中 明确的标明了出去IE5不支持:first-letter外 其他版本一律支持。这一点 在许多博客中都被提及 例如怿飞的IE8 beta1 中的 CSS 属性。
如果你的兼容性检查列表中还没有IE8的名字 如果你觉得诸如首字下沉这样的额外视觉效果可有可无 那么你可以在这一行结束浏览了。但 如果你执着于此 希望IE8的用户也可以在你的网页上看到类似于报刊文章上的效果 你可以往下看。
在多次努力之后 我放弃折腾那可怜的css IE8b1对于:first-letter的不支持 不是在css hack层面能解决的。我们只能求助于js。我们需要找到一个页面中第一个段落开始的地方 找到这个段落第一个字 让js将其处理为特殊样式：
复制代码代码如下:window.onload = initial; function initial() { var letter = document.getElementsByTagName('p')[0]; var word = letter.firstChild.nodevalue; var num = word.substring(0,1); var other = word.substring(1,word.length); document.getElementsByTagName('p')[0].innerHTML="<span id='first-letter-plus'>"+ num +"</span>"+ other; }原谅我的js水平 我始终无法直接定义num的方法 我只能给其添加一些标记 以至于代码如此臃肿 我相信一定有更简单、更强大的js方法。
接下来 我们只需要在css中这样定义：复制代码代码如下: #demo #first-letter-plus { font-size:40px; font-family:"楷体_GB2312"; font-weight:bold; font-style: normal; line-height:1.2em; float:left; padding:5px 2px 0 0; color:#c00; }查看效果页面1 所有的浏览器都搞定了 这一切都建立在不关闭js的前提下。但是对于一些完美者来说 考虑到有人会关闭js运行浏览器时 我们需要再额外添加一些代码：复制代码代码如下:#demo p:first-child:first-letter { font-size: 40px; font-family:"楷体_GB2312"; font-weight:bold; line-height:1.2em; float:left; padding:5px 2px 0 0;这样在关闭js的情况下 FF、Opera以及Safari都可以正常显示应有的首字下沉效果 不过IE们就有些混乱 IE8b1天生不支持 无效果；IE7正常；IE6不识别:first-child:first-letter这样的用法；IE5.5神奇的识别了:first-letter 但是它忽略了:first-child 这导致了所有段落p都会有一个首字下沉的效果 这可不是我们排版上希望看到的。并且当你回复使用js的时候 在Opera中会产生一个有趣的现象 段落的前两个字都有了效果 查看效果页面2。这是因为在Opera中 第一个字包含在<span></span>中 效果由js实现 Opera认为p的:first-letter应该在<span></span>之后开始。
因此 我们需要改动一下css:复制代码代码如下: #demo p > *:first-child:first-letter { font-size: 40px; font-family:"楷体_GB2312"; font-weight:bold; line-height:1.2em; float:left; padding:5px 2px 0 0; color:#c00; } 这样以来 Opera中的奇怪现象也消失了。查看这个效果页面3。
说实话 我并不推荐使用如此繁复的代码（效果页面2和3）实现一个首字下沉。就好像在html中不推荐使用<q></q>那样。直接使用效果页面1的代码 让js去做这个在IE中找不到平衡点的事情——js开启 大家都有同样的效果；js关闭 效果也一起消失。因为它不仅使得IE8可以应用首字下沉的效果 也避免了其他版本IE在对:first-child:first-letter这样的一个css应用上的处理差异（直接使用:first-letter会让每个段落开头都有一个首字下沉效果 这也是为什么振之在他的博客正文中不使用这个效果的原因）。
上帝保佑 IE8正式推出的时候可以支持:first-child（还有:first-line）。
来源：爱蒂网
