CSS伪类及伪元素的知识和使用
学习WEb技术当然首先要先学好HTMl和CSS基础知识和使用，但仅仅学习他们的一些基础标签、元素、以及颜色布局是不够的，要学就应该深入的去了解，用这些基础的只是做出更好的效果。
这里讲解一点关于CSS伪类和伪元素的用法
一：CSS伪类用于向某些选择器添加特殊效果。
先看看例子：
请把鼠标移动到这些链接上，以查看效果：
PS: four中的monospace在IE6上才能看到效果, ...？
伪类的语法：
selector : pseudo-class {property: value}
和CSS一起使用：
selector.class : pseudo-class {property: value}
伪类的种类：
属性 描述 css
:active 向被激活的元素添加样式。 1
:focus 向拥有键盘输入焦点的元素添加样式。 2
:hover 当鼠标悬浮在元素上方时，向元素添加样式。 1
:link 向未被访问的链接添加样式。 1
:visited 向已被访问的链接添加样式。 1
:first-child 向元素的第一个子元素添加样式。 2
:lang 向带有指定 lang 属性的元素添加样式 。 2
以上均可用于IE8.0以上及其他主流支持CSS3.0的浏览器，ie6.0好像只能看到css1的伪类效果；
第一个例子中有 :link :visited :hover 的使用
下面来看看在CSS2中出现的 :first-child :lang
:first-child 伪类向元素的第一个子元素添加样式。
These are the necessary steps:
- Intert Key
- Turn key clockwise
- Push accelerator
Do not push the brake at the same time as the accelerator.
在上面的例子中，作为第一个元素的元素包括第一个 p、第一个 li 和 strong 和 em 元素。
设定：
p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}
则第一个p元素样式为黑体 第一个子元素li为大写 同理可设其他的；
:lang 伪类向带有指定 lang 属性的元素添加样式。
:lang 伪类允许您为不同的语言定义特殊的规则。在下面的例子中，:lang 类为带有值为 "no" 的 lang 属性的 q 元素定义引号的类型：
Some text A quote in a paragraph
Some text.
PS: 所有主流浏览器支持:lang IE为8.0以上～
PS: 以上为伪类的基本用法，详情参见W3School
下面讲一些伪类的灵活运用的实例：
:hover 简单的放大效果：
放大效果
简单的放大效果：
这样的使用可以减少使用js代码，也便于操作；
用css3伪类target制作tab选项卡效果：
选项卡
等等～都是不错的使用！
二：伪元素的使用和方法：
用途同伪类，语法相似：
selector:pseudo-element {property:value;}
和CSS配合使用
selector.class:pseudo-element {property:value;}
CSS3.0前的为元素有4种：
伪元素 作用 IE Firefox W3C
:first-letter 将特殊的样式添加到文本的首字母 5 1 1
:first-line 将特殊的样式添加到文本的首行 5 1 1
:before 在某元素之前插入某些内容 1.5 2
:after 在某元素之后插入某些内容 1.5 2
简单讲解一下：
:first-line 伪元素用于向文本的首行设置特殊样式。
:first-letter 用于文本首字母的特殊样式使用。 PS: 这俩个 伪元素只能用于块级元素。
伪元素和CSS类配合使用：
p.article:first-letter
{
color: #FF0000;
}
This is a paragraph in an article。
多重为元素的使用：
p:first-letter
{
color:#ff0000;
font-size:xx-large;//字体为决定大小
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
:before :after 为在 元素的内容之前和之后插入新内容
下面看一个首字母下沉的特效：
首字母下沉 : first-letter pseudo-element to add a special effect to the first letter of a text!
以上是CSS中的伪类和伪元素的相关知识，如果灵活运用会制作很多不同的效果！！