什么是伪类？

伪类用于定义元素的特殊状态。例如，它可用于：

当用户将鼠标悬停在元素上时为其设置样式

访问和未访问的链接不同样式

在获得焦点时设置元素的样式

伪类的语法

后代选择器匹配作为指定元素后代的所有元素。以下示例选择 div 元素内的所有 p 元素：

1选择器:伪类 { 属性:值; }

链接可以以不同方式显示：

/* 未访问的链接 */

a:link {color: red; }

/* 已浏览过的链接 */

a:visited {color: green; }

/* 鼠标悬停时候的链接 */

a:hover {color: hotpink; }

/* 选定的链接 */

a:active {color: blue; }

注意： a:hover 必须在CSS定义 a:link 之后和 a:visited 之后才能生效！ a:active 必须 a:hover 在CSS定义之后才能有效！伪类名称不区分大小写。

伪类和CSS类

伪类可以与CSS类结合使用：当您将鼠标悬停在示例中的链接上时，它将更改颜色：

1a.highlight:hover { color: #ff0000; }

将鼠标悬停在<div>上

:hover在<div>元素上使用伪类的示例：

1div:hover { background-color: blue; }

简单的工具提示悬停

将鼠标悬停在 div 元素上以显示 p 元素（如工具提示）

p {display: none;background-color: yellow;padding: 20px; }

div:hover p { display: block; }

:first-child伪类

:first-child 伪类指定的元素是另一个元素的第一个子匹配。在以下示例中，选择器匹配任何元素的第一个子元素 p 元素：

1p:first-child { color: blue; }

匹配所有 p 元素中的第一个元素

1p i:first-child { color: blue; }

匹配所有第一个子 p 元素中的所有元素

1p:first-child i { color: blue; }

:lang伪类

:lang 伪类允许定义不同语言的特殊规则。在下面的示例中，:lang使用lang=“no”定义 q 元素的引用：

1q:lang(no) { quotes: "~""~"; }

ITPub博客

css3伪类和伪元素你都懂了吗