一、css伪类（Pseudo-class）是用来添加一些选择器的特殊效果。
由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。
伪类的语法：
selector:pseudo-class{property:value;}
css类也可以使用伪类：
selector.class:pseudo-class{property:value;}，eg：
a.red:visited{color:#FF0000;}
<a class="red" href="css-syntax.html">css syntax</a>伪类包括：
| 选择器 | 示例 | 事例说明 |
| :link | a:link | 让它表现地像个链接一样 |
| :visited | a:visited | 访问过之后什么效果（只能修改特定的样式） |
| :hover | a:hover | 把鼠标移动上去有什么效果 |
| :active | a:active | 激活之后是什么效果 |
注意：
- 在css定义中，a:hover必须被置于a:link和a:visited之后，才是有效的；
- a:active必须被置于a:hover之后，才是有效的；
- 伪类的名称不区分大小写。
| 选择器 | 示例 | 事例说明 |
| :focus | input:focus | 向拥有键盘输入焦点的元素添加样式（当focus之后显示效果） |
| :first-child | p:first-child | 向元素的第一个子元素添加样式 |
| :lang | p:lang | 向带有指定lang属性的元素添加样式 |
| :nth-of-type(x) | 常用来对表格显示奇数行和偶数行不同色块;注意是x-1行对应的效果 | |
| :empty | 如果选择元素没有子节点，表现什么样式，常用来做首屏渲染 | |
| :read-only | 元素只读 | |
| :only-of-type | 页面中只有这一个类型的元素会显示的效果 | |
| :invalid | 校验之后显示的效果 |
二、伪元素（ Pseudo-elements）是用来添加一些选择器的特殊效果。
与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
伪元素的语法：
selector:pseudo-element{property：value}
css类也可以使用伪元素：
selector.class:pseudo-element{property:value}
p.article:first-letter{color:red;}
<p class="article">A paragraph in an article</p>伪元素包括：
| 选择器 | 示例 | 事例说明 |
| :first-line | p:first-line | 选择每个<p>元素的第一行；只能用于块级元素 |
| :first-letter | p:first-letter | 选择每个<p>元素的第一个字母；只能用于块级元素 |
| :before | p:before | 在每个<p>元素之前插入内容； |
| :after | p:after | 在每个<p>元素之后插入内容； |
注意：css2伪类和伪元素都是用单冒号，所有的浏览器都兼容，但是css3伪类为单冒号，伪元素为双冒号；但是双冒号IE8以下不兼容！所以，c如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。