欢迎来到站长教程网!

CSS

当前位置:主页 > 网页制作 > CSS >

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

时间:2020-06-08|栏目:CSS|点击:

写这篇文章的起因来自与毅博客的《美化段落文本 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伪类的。

叼着烟斗的名侦探说过:“除掉所有不可能的,留下来的,无论多么不合理,但它就是真相......!”是的,真相就是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将其处理为特殊样式:

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>" + num + "</span>" + other; 8: }

原谅我的js水平,我始终无法直接定义num的方法,我只能给其添加一些标记,以至于代码如此臃肿,我相信一定有更简单、更强大的js方法。

接下来,我们只需要在css中这样定义:

1: #demo #first-letter-plus { font-size:40px; font-family:"楷体_GB2312"; 2: font-weight:bold; font-style: normal; line-height:1.2em; float:left; 3: padding:5px 2px 0 0; color:#c00; }

查看效果页面1,所有的浏览器都搞定了,这一切都建立在不关闭js的前提下。但是对于一些完美者来说,考虑到有人会关闭js运行浏览器时,我们需要再额外添加一些代码:

上一篇:TSYS 新闻列表JS调用下载

栏    目:CSS

下一篇:CSS制作网页时遇到BUG的解决方法

本文标题:CSS教程:first-letter伪类元素的特点

本文地址:http://www.jh-floor.com/wangyezhizuo/CSS/125585.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:888888 | 邮箱:888888#qq.com(#换成@)

Copyright © 2002-2017 青云站长教程网 版权所有 琼ICP备xxxxxxxx号