CSS教程:first-letter伪类元素的特点

写这篇文章的起因来自与毅博客的《美化段落文本 2》，在这篇文章的最后振之谈到了关于:first-letter这样的伪类元素的特点：

有一次我试图让<div id="acticle"><p>……</p></div>中的P也能实现首字下沉，可是结果却失败了，得出的结论是：我们并不能隔着一层标签去控制子对象中的第一个字符。

由于这句存在误解的可能性（我就误解了他的意思），振之在第一时间就删除这句话。他的意思准确地说，是:first-letter这个伪类无法向下“继承”。例如：

   1:  <div id="demo">

   2:      <p>我要实现首字下沉</p>

   3:  </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中的任何属性均不向下继承。

   1:  #demo:first-letter { font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; 

   2:  line-height:1.2em; float:left; padding:5px 2px 0 0; color:#c00 }

   3:   

   4:  #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伪类的。

叼着烟斗的名侦探说过：“除掉所有不可能的，留下来的，无论多么不合理，但它就是真

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!