CSS3伪类和伪元素

作为一个CSS3初学不久者来说,很容易混淆单冒号(:)和双冒号(::)的用法,以为两者可以互换着来使用。我自己之前也混淆过他们,因为两者看起来太相像了,就像孪生兄弟。但实际上,他们的区别还是挺大的,最多算得上近房亲戚。
下面我们来开始讲讲单冒号(:)伪类和双冒号(::)伪元素有什么相同和不同点(另外在CSS2中单冒号“:” 也叫做伪对象,具体可看看http://www.mb5u.com/tool/css2/
 
单冒号(:)早在CSS中已经存在了,相信用惯CSS的码农肯定对:hover伪类并不陌生。另外还有几个比较实用的伪类,例如:
与链接访问有关的 :link(未被点击过的链接),:visited(链接已被点击访问过)
与键盘输入有关的 :focus(获得键盘输入焦点)
其他像 :lang伪类,:first-child伪类,大家可以自行到W3C官网看看具体用法,在这里我就不赘述了。特别说一下 :first-child伪类,这个伪类很有意思,不得不佩服制定规则的人的洞察力,CSS3出现了类似用法的伪类,为开发者提供了不少方便。
 
其实,伪类和伪元素在CSS中已经存在,而CSS3为了区分伪类和伪元素,伪元素采用双冒号写法。伪类和伪元素都对特定元素进行选择,前者重在对元素状态的描述,而后者更重在对元素本身的描述,这是伪类和伪元素内在的联系和区别。
 
一、CSS3伪类
CSS3伪类又分为两类:状态伪类和结构性伪类。
CSS3状态伪类沿用了我们上面已经提及过的CSS中的:hover ,:link ,:visited 等伪类。另一方面CSS3中大幅增加状态伪类,例如:
:first-child 选择某个元素的第一个子元素;
:last-child 选择某个元素的最后一个子元素;
:nth-child(index)根据数量选择某个元素的一个特定子元素,括号中填写索引值
:nth-of-type(index)根据类型选择某个元素的一个特定子元素,这个伪类与:nth-child()最大的不同点就在于是按类型来选择子元素的,而不是一股脑的什么子元素都算在内。
给个例子吧:
html:
<div>
<span>这是数字1</span>
<span>这是数字2</span>
<p>这是数字3</p>
<p>这是数字4</p>
<div>
 
css:
div:nth-child(1){color:blue;}
只会让第一个span元素的颜色变蓝
 
div:nth-of-type(2){color:red;}
则会使第二个span元素和第二个p元素的颜色都变红,原因是把div的子元素分成了两类,一类是span元素,另外一类是p元素。
 
二、CSS3伪元素
CSS中已经有的伪元素 :first-letter ,:first-line ,CSS2中新增的伪元素 :after ,:before
CSS3中将上面的4个伪元素的单冒号变成双冒号,另外还新增了::selection伪元素。
下面来讲讲CSS3中这几个伪元素的一些常见功能
(1)::first-letter和::first-line
:first-letter和:first-line分别对文字的第一个字母和第一行进行选择,这个从英文直接翻译过来是不难理解的,报刊上的第一个文字大写处理就可以用::first-letter。下面重点谈谈另外几个伪元素
(2)::before和::after
::before和::after后面经常跟着content,用于在css渲染中向元素的头部或尾部添加内容。很关键的一点是添加的这些内容不会出现在DOM中,仅仅是作为css渲染层对元素进行修改。所以不要用::before或::after展示有实际意义的内容,而仅仅使用它们显示修饰性内容,例如在文字前面加上icon图标。至于怎么添加和添加有什么前提条件,又可以写一篇文章了。下次有空再来写写这个用法。
 
 
关于兼容性问题:
由于IE对CSS3的支持问题,所以在写代码时也要注意一些小问题。如果只需要兼容firefox、webkit、opera等浏览器,伪元素采用双冒号的写法是没多大问题的,但是如果需要兼容IE浏览器,那么还是用单冒号的写法比较稳妥。
 
上一篇:【QT】C++ GUI Qt4 学习笔记3


下一篇:Linux基础学习(11)--Shell编程