CSS实例教程:first

摘要: CSS实例教程:first-letter伪类原素的特性|频道:CSS|点一下: 次写本文的诱因来源于与毅blog的《清理文章段落文字 2》,在这里一篇文章的最终振之提到了有关:first-letter那样的伪类原素的...

CSS实例教程:first-letter伪类原素的特性 |频道:CSS|点一下: 次

写本文的诱因来源于与毅blog的《清理文章段落文字 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 }

叼着烟斗的名探案说过: 祛除全部不能能的,留有来的,不管多么的不符合理,但它便是实情......! 是的,实情便是IE8 beta1不兼容:first-letter(也有:first-line)。希望它是beta1版本号中的一处赶不及修补的bug,由于在微软公司官方网的IE5~IE8 CSS适配表格中,确立的标出了出来IE5不兼容:first-letter外,别的版本号一概适用。这一点,在很多blog上都被谈及,比如怿飞的IE8 beta1 中的 CSS 特性。

在数次勤奋以后,我舍弃瞎折腾那可伶的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运作访问器时,大家必须再附加加上一些编码:

共2页: 上一页12下一页


联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503