什么是伪类？
伪类是用来定义元素的一种特殊状态。
例如，它可用于：
- 样式元素时过它用户将鼠标
- 风格和参观访问过的链接不同
- 风格元素，当它获得焦点
鼠标悬停我
句法
伪类的语法：
selector:pseudo-class {
property:value;
}锚伪类
链接可以显示在不同的方式：
例
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited
link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
试一试»  | 注意： a:hover必须出现在a:link和a:visited ！要想在CSS定义是有效的a:active必须出现在a:hover在CSS定义，以便有效！伪类名称不区分大小写。 |
|---|
伪类和CSS类
伪类可以与CSS类组合：
当你将鼠标悬停在该示例中的链接，它会改变颜色：
悬停在<div>
使用的例子:hover伪类上<div>元素：
CSS -的:first-child伪类
在:first-child伪类指定的元素是另一个元素的第一个子匹配。
比赛第<p>元素
在下面的例子中，选择匹配任何<p>元素是所有元素的第一个孩子：
比赛第<i>中的所有元素<p>元素
在下面的例子中，选择相匹配的第<i>中的所有元素<p>元素：
匹配所有<i>所有第一个子元素<p>元素
在下面的例子中，选择匹配所有<i>中的元素<p>这是另一个元素的第一个子元素：
CSS -的:lang伪类
本:lang伪类允许定义不同语言的特殊规则。
在下面的例子， :lang定义了引号<q>的元素lang="no" ：
例
<html>
<head>
<style>
q:lang(no)
{
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q>
Some text.</p>
</body>
</html>
试一试» 
更多示例
加入不同风格的超链接
这个例子演示了如何将其他样式添加到超链接。
使用:focus
这个例子演示了如何使用:focus伪类。
自测练习用！
所有的CSS伪类
| 选择 | 例 | 举例说明 |
|---|---|---|
| :active | a:active | 选择活动链接 |
| :checked | input:checked | 选择每个检查<input>元素 |
| :disabled | input:disabled | 每一个选择禁用<input>元素 |
| :empty | p:empty | 选择每<p>没有孩子的元素 |
| :enabled | input:enabled | 选择每个已启用<input>元素 |
| :first-child | p:first-child | 选择每<p>元素是它的父的第一个孩子 |
| :first-of-type | p:first-of-type | 选择每<p>元素，它是第一个<p>它的父元素 |
| :focus | input:focus | 选择<input>元素具有焦点 |
| :hover | a:hover | 选择了鼠标链接 |
| :in-range | input:in-range | 选择<input>同的值的指定范围内的元件 |
| :invalid | input:invalid | 选择所有<input>具有无效值的元素 |
| :lang(language) | p:lang(it) | 选择每<p>用lang属性值开头为“它”元素 |
| :last-child | p:last-child | 选择每<p>元素是它的父的最后一个子 |
| :last-of-type | p:last-of-type | 选择每<p>元素是最后<p>它的父元素 |
| :link | a:link | 选择所有访问过的链接 |
| :not(selector) | :not(p) | 选择的每一个元素不是一个<p>元素 |
| :nth-child(n) | p:nth-child(2) | 选择每<p>元素是它的父的第二个孩子 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择每<p>元素是它的父的第二个孩子，从最后一个子计数 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择每<p>元素是第二<p>它的父元素，从最后一个子计数 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择每<p>元素是第二<p>它的父元素 |
| :only-of-type | p:only-of-type | 选择每<p>元素是唯一<p>它的父元素 |
| :only-child | p:only-child | 选择每<p>元素是它的父的独生子 |
| :optional | input:optional | 选择<input>没有元素"required"的属性 |
| :out-of-range | input:out-of-range | 选择<input>与值的元素在指定范围之外 |
| :read-only | input:read-only | 选择<input>带元素"readonly"属性指定 |
| :read-write | input:read-write | 选择<input>没有元素"readonly"属性 |
| :required | input:required | 选择<input>与元素"required"指定属性 |
| :root | root | 选择文档的根元素 |
| :target | #news:target | 选择当前活跃#news元（点击包含锚名的URL） |
| :valid | input:valid | 选择所有<input>与一个有效的价值要素 |
| :visited | a:visited | 选择所有访问过的链接 |
所有CSS伪元素
| 选择 | 例 | 举例说明 |
|---|---|---|
| ::after | p::after | 每一个后面插入内容的<p>元素 |
| ::before | p::before | 每前插入内容<p>元素 |
| ::first-letter | p::first-letter | 每次选择的第一个字母<p>元素 |
| ::first-line | p::first-line | 选择每第一行<p>元素 |
| ::selection | p::selection | 选择由用户选择的一个元件的一部分 |