伪类与伪元素

 

伪类：
伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具备的特性，而不是元素的id、class、属性等静态的标志。因为状态是动态变化 的，因此一个元素达到一个特定状态时，它可能获得一个伪类的样式；当状态改变时，它又会失去这个样式。由此能够看出，它的功能和class有些相似，但它 是基于文档以外的抽象，因此叫伪类。
:first-child
:link:
:visitive
:hover
:active
:focus
:lang

伪元素：
与伪类针对特殊状态的元素不一样的是，伪元素是对元素中的特定内容进行操做，它所操做的层次比伪类更深了一层，也所以它的动态性比伪类要低得多。实 际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器没法完成的工做。它控制的内容实际上和元 素是相同的，可是它自己只是基于元素的抽象，并不存在于文档中，因此叫伪元素。
:first-line
first-letter
:before
:after

<!--------------------------------------------------------------------------------->

:link

伪类将应用于未被访问过的连接，与:visited互斥。

:hover

伪类将应用于有鼠标指针悬停于其上的元素。

:active

伪类将应用于被激活的元素，如被点击的连接、被按下的按钮等。

:visited

伪类将应用于已经被访问过的连接，与:link互斥。

:focus

伪类将应用于拥有键盘输入焦点的元素。

:first-child

伪类将应用于元素在页面中第一次出现的时候。

:lang

伪类将应用于元素带有指定lang的状况。

:first-letter

伪元素的样式将应用于元素文本的第一个字（母）。

:first-line

伪元素的样式将应用于元素文本的第一行。

:before

在元素内容的最前面添加新内容。

:after

在元素内容的最后面添加新内容。

CSS中存在一些比较特殊的属性，称之为伪类，它们之中最经常使用的就是定义连接的伪:link，:visited，:hover，:active等。

    除了它们，还有一些不被常使用的伪类，有:focus，:first-child，:lang等。

    并且CSS里不光有伪类，还有伪元素，好比：:first-letter，:first-line，:before和:after。

    ?本文中其它伪元素暂且不表，单说:after伪元素。

    after顾名思义是在元素后面的意思，实质是在元素以后添加内容。

    这个伪元素容许制做人员在元素内容的最后面插入生成内容，须要和content属性一块儿使用，设置在对象后发生的内容。默认地，这个伪元素是inline行内元素，不过可使用属性 display 改变这一点。 

    全部主流浏览器都支持 :after 伪元素，但对于IE来讲，只有IE8以上版本支持。 

    下面举个例子，在CSS代码中插入：

<style type="text/css"> h1:after {content:url(logo.gif)} </style> 
<h1>标题内容</h1>

    在显示时，标题内容后会插入一张图片。这就是伪元素:after的做用。

:after伪类的content还能够跟其它的参数，

一：字符串  例如：

1 <style type="text/css"> 2 .test:after{content:"测试代码"}; 3 </style> 4 <div class="test">测试div：</div>

运行结果显示为：测试div：测试代码

二：attr(x)，attr是属性的意思，顾名思义，就是读取该类节点的属性  例如：

1 <style type="text/css"> 2 .test:after{content:attr(id)}; 3 </style> 4 <div class="test" id="aaa">测试div的id为：</div>

运行结果显示为：测试div的id为：aaa

三：固定参数

close-quote：插入 quotes 属性的后标记

no-close-quote ：并不插入 quotes 属性的后标记。但增长其嵌套级别

open-quote：插入 quotes 属性的前标记

no-open-quote：并不插入 quotes 属性的前标记。但减小其嵌套级别