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

X1king西京

X1king西京

2016-02-20 00:15

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享CSS教程:first-letter伪类元素的特点,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

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

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

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
   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伪类的。

叼着烟斗的名侦探说过:除掉所有不可能的,留下来的,无论多么不合理,但它就是真相......!是的,真相就是IE8 beta1不支持:first-letter(还有:first-line)。我希望这是beta1版本中的一处来不及修复的bug,因为在微软官方的IE5~IE8 CSS兼容表中,明确的标明了出去IE5不支持:first-letter外,其他版本一律支持。这一点,在许多博客中都被提及,例如怿飞的IE8 beta1 中的 CSS 属性。

如果你的兼容性检查列表中还没有IE8的名字,如果你觉得诸如首字下沉这样的额外视觉效果可有可无,那么你可以在这一行结束浏览了。但,如果你执着于此,希望IE8的用户也可以在你的网页上看到类似于报刊文章上的效果,你可以往下看。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

在多次努力之后,我放弃折腾那可怜的css,IE8b1对于:first-letter的不支持,不是在css hack层面能解决的。我们只能求助于js。我们需要找到一个页面中第一个段落开始的地方,找到这个段落第一个字,让js将其处理为特殊样式:

   1:  window.onload = initial;
   2:  function initial() {
   3:  var letter = document.getElementsByTagName('p')[0];
   4:  var word = letter.firstChild.nodeValue;
   5:  var num = word.substring(0,1);
   6:  var other = word.substring(1,word.length);
   7:  document.getElementsByTagName('p')[0].innerHTML= 
   "span id='first-letter-plus'" + num + "/span" + other;
   8:  }